1、代码（主要利用Flex和line-height属性设置盒模型中文本垂直居中对齐的方法）

wxml

<view class="box">
  <view class="title">Flex弹性盒模型布局</view>
  <!-- 实现三栏水平布局 -->
  <view style="display: flex;text-align: center;line-height: 80rpx;">
    <view style="background-color: red;flex-grow:1;">1</view>
    <view style="background-color: green;flex-grow:1;">2</view>
    <view style="background-color: blue;flex-grow:1;">3</view>  
  </view>
--------------------------------------------
  <!-- 实现左右混合布局 -->
  <view style="display: flex;height: 300rpx;text-align: center;">
    <view style="background-color: red;width: 250rpx;line-height: 300rpx;">1</view>
    <view style="display: flex; flex-grow: 1;text-align: center;flex-direction: column;line-height: 150rpx;">
      <view style="background-color: blue;flex-grow: 1;">2</view>
      <view style="background-color: green;flex-grow: 1;">3</view>    
    </view>
  </view>
  --------------------------------------------
  <!-- 实现上下混合布局 -->
  <view style="display: flex;text-align: center;height: 300rpx;flex-direction: column;">
    <view style="height: 100rpx;line-height: 100rpx;background-color: red;;">1</view>
    <view style="display: flex;text-align:center;line-height: 200rpx;flex-direction:row;">
      <view style="flex-grow: 1;background-color: green;">2</view>
      <view style="flex-grow: 1;background-color: blue;">3</view>    
    </view>
  </view>
</view>

2、结果

3、flex弹性布局总结

• display:flex （先声明布局是弹性布局）
• flex-direction （弹性布局框当中的方向，默认是横向）

• flex-grow （弹性布局当中富裕位置分配方法，默认是0）

  
  flex弹性盒模型布局.jpg flex弹性布局当中的容器布局.jpg
  Flex项目布局.jpg
  文本垂直居中对齐的设置方法.jpg