微信小程序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，若有不正确的地方欢迎指正。