本篇中，我們把Flex布局的幾種方式先說(shuō)明再舉例的方式展示給的大家。
當(dāng)然最好自己動(dòng)手跟著編碼達(dá)到最好的效果。
注：源碼在最底部可以下載。
先打開微信小程序WEB開發(fā)者工具，新建項(xiàng)目，刪除無(wú)用的代碼。

下面是官方就這個(gè)屬性的說(shuō)明：

flex-directionflex-direction屬性表示布局的方向 有兩個(gè)值： 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控制外，還可以有另外兩個(gè)樣式屬性，如下是其中一個(gè)justify-content.****justify-contentjustify-content:彈性項(xiàng)目在主軸main-axis線上的對(duì)齊方式； 值：flex-start | flex-end |center | space-between | space-around （注：當(dāng)橫向排列時(shí) 主軸就是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外，還可以通過(guò)下面的align-items屬性來(lái)控制布局。****align-itemsalign-Items表示在垂直方向上的布局情況定義在父級(jí)容器中；有 flex-start | flex-end | center |stretch 四個(gè)值。

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>

效果如下圖：

本示例的源碼請(qǐng)到這個(gè)網(wǎng)頁(yè)中查看下載：
http://bbs.html51.com/t-425-1-1/

歡迎您與51小程序共同成長(zhǎng)，成為微信小程序定制開發(fā)專家。