随着微信小程序的火热度上升,越来越多的非前端开发者开始接触小程序的开发,根据QQ群里面的反应来看,这其中很多人对flex布局比较陌生,这篇文章不会对flex的概念做过多说明。
一般来说我都会推荐先看看阮一峰写的flex布局,不过有的人说看了也不是很明白,想直接上手用,刚好有点时间整理一下,顺带给自己复习一下。

该样式不止适用于微信小程序,同样适用与其它web页面,把后缀名改为.css即可,故样式文件里面会有一些其它浏览器的兼容写法,若不需要可以删除

文件内容大致如下,均带有注释:

图片描述

使用方式如下:

  1. 去文章尾部给出的地址下载或者复制样式文件代码,即app.wxss

  2. 加入自己的项目文件夹(不需要的样式可以去掉);

  3. 直接引用clss即可,如下:

    // 要使用弹性盒子,则需给父级加上 .box 类,使父级变成弹性盒子模型,如从左至右排列布局
    <view class="box box-lr">
        <view>子元素</view>
        <view>子元素</view>
    </view>
    
    // 从上至下排列
    <view class="box box-tb">
        <view>子元素</view>
        <view>子元素</view>
    </view>
    
    // 居中对齐
    <view class="box box-center-center">
        <view>子元素</view>
        <view>子元素</view>
    </view>

因我的小程序demo也使用了该样式文件,所以我直接把样式文件放入demo的app.wxss里了,Demo地址,样式文件下载(点击前往),欢迎start/fork,若有不正确的地方欢迎指正。

本文固定链接:

微信小程序flex布局

http://www.js-code.com/weixin/weixin_47037.html

80%的人都看过