小程序页面布局之Flexbox布局

实现效果：

循环列表图片加文字标题。实现两列布局自动换行。

CSS部分：

#two{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
  justify-content:space-around;
  height:70vh;
}

#two .area{
  width:46vw;
  text-align: center;
}

#two为当前区域外层包装。

#two .area为内部循环包装标签。

HTML部分：

<view id='two'>
  <view class='area'>
      <image mode="widthFix" src='../assets/images/ttt.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/aaa.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/bbb.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/ccc.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
  <view class='area'>
      <image mode="widthFix" src='../assets/images/ddd.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
    <view class='area'>
      <image mode="widthFix" src='../assets/images/ttt.jpg' style='background:#faa33a;width:100%;' />
      <text>左边内容</text>
  </view>
</view>

通过HTML结构使用flexbox布局使每个‘area’视图循环排列并且通过定义外层包装的

flex-direction:row;

实现内部元素横向排列并且通过

flex-wrap:wrap;

让元素自动换行。这同时需要设置内部元素的宽度为一个数值，这个数值使用CSS3的响应式数值。vw vh。

当前内部元素设置为：

#two .area{
  width:46vw;
  text-align: center;
}

46vm的宽度，表示为当前屏幕宽度的46%的宽度部分，正好实现内容换行后形成两行排列的布局。

然后在外层包装定义：

  align-content:center;
  justify-content:space-around;

align-content:center; 作用是在换行后元素的垂直对齐方式，位于层高的中间位置对齐。

横向的间距则使用justify-content:space-around; 设置元素的自动间距（根据外层的宽度和自身的宽度），在这里我们设置了内部元素的宽度为46vw，表示46%的宽度，两块46%相加是92%的宽度，这里剩余的宽度部分会被平均分配出元素之间的间距形成平均间隔。

备注：#two的高度设置成了70vh，表示这个层的高度相当于70%高度的屏幕区域，为了使内部元素高度的间隔平均相等，这里设置成70%正合适。

知识点：

flexbox布局

justify-content   //用于调整横向布局时的内容对齐方式，分别有五种对齐方式。

flex-direction:row  //使元素横向排列

flex-wrap:wrap; //使横向排列的元素实现自动换行。

align-content: //自动换行模式下元素的行对齐方式。