本篇中萌京，我們把Flex布局的幾種方式先說明再舉例的方式展示給的大家雁歌。
當(dāng)然最好自己動手跟著編碼達(dá)到最好的效果。
注：源碼在最底部可以下載知残。
先打開微信小程序WEB開發(fā)者工具靠瞎，新建項目，刪除無用的代碼求妹。
下面是官方就這個屬性的說明：
flex-directionflex-direction屬性表示布局的方向 有兩個值： row | column 默認(rèn)屬性是row 行布局
下面的代碼是用了row行布局乏盐，如下：
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下圖：
flex-direction: column屬性：
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="flex-direction:column;height: 100%;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
flex-direction: column的效果圖：
另外布局樣式中，除了flex控制外制恍，還可以有另外兩個樣式屬性父能，如下是其中一個justify-content.****justify-contentjustify-content:彈性項目在主軸main-axis線上的對齊方式； 值：flex-start | flex-end |center | space-between | space-around （注：當(dāng)橫向排列時 主軸就是x軸净神；反之則是y軸何吝。）
justify-content:flex-start
<view class="section">
<view class="section__title">justify-content:flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下圖：
除了justify-content外鹃唯，還可以通過下面的align-items屬性來控制布局爱榕。****align-itemsalign-Items表示在垂直方向上的布局情況定義在父級容器中；有 flex-start | flex-end | center |stretch 四個值坡慌。
align-items:flex-start;
<view class="section">
<view class="section__title">align-items:flex-start;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下圖：
align-items:center;
<view class="section">
<view class="section__title">align-items:center;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-start;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
align-items:flex-end;
<view class="section">
<view class="section__title">align-items:flex-end;</view>
<view class="flex-wrp" style="flex-direction:row;align-items:flex-end;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
效果如下圖：
本示例的源碼請到這個網(wǎng)頁中查看下載：
http://bbs.html51.com/t-425-1-1/
歡迎您與51小程序共同成長黔酥，成為微信小程序定制開發(fā)專家。
