微信小程序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，如有不正確的地方歡迎指正。