Flex实现页面布局

Flex容器布局``
使用方式:

属性：

例子：

<!--index.wxml-->
<view class="box">
  <view style="color:red;text-align:center">页面布局</view>
  <!--实现三栏水品均匀布局-->
  <view style="display:flex;text-align:center;line-height:80px;"><!--设置flex容器，文本对齐方式，容器高度-->
    <view style="background-color:red;flex-grow:1;">1</view><!--flow-grow：1 占容器一份-->
    <view style="background-color:green;flex-grow:1;">2</view>
    <view style="background-color:yellow;flex-grow:1;">3</view>
  </view>
  -------------------------------------------------
  <!--实现左右混合布局-->
  <view style="display:flex;text-align:center;height:300px;">
    <view style="background-color:red;width:250px;line-height:300px;">1</view>
    <view style="display:flex;flex-direction:column;flex-grow:1;line-height:150px;"><!--colum-垂直显示-->
      <view style="background-color:blue;flex-grow:1;">2</view>
      <view style="background-color:black;flex-grow:1;">3</view>
    </view>
  </view>
  --------------------------------------------------
  <!--实现上下混合布局-->
  <view style="display:flex;flex-direction:column;line-height:300px;text-align:center;">
    <view style="background-color:red;height:100[x;line-height:100px">1</view>
    <view style="flex-grow:1;display:flex;flex-direction:row;">
      <view style="background-color:green;flex-grow:1;">2</view>
      <view style="background-color:blue;flex-grow:1;">3</view>
    </view>
  </view>
</view>