微信小程序flex布局

随着微信小程序的火热度上升，愈来愈多的非前端开发者开始接触小程序的开发，根据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，如有不正确的地方欢迎指正。