小程序页面布局之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   //用于调整横向布局时的内容对齐方式，分别有五种对齐方式。

/* justify-content:flex-start;*/

/* 项目间隔标准设置，没有间隔左对齐*/

/* justify-content:flex-end;*/

/* 项目右对齐显示*/

/* justify-content:center;*/

/* 设置项目中间显示*/

/* justify-content:space-between;*/

/* 项目添加间隔且两侧紧贴边沿没有距离*/

/* justify-content:space-around;*/

/* 项目添加间隔且两侧也有间隔距离，在项目周围都添加距离*/

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

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

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

/* align-content:stretch;*/

/* 默认拉伸的对齐方式*/

/* align-content:flex-start;*/

/* 贴近顶部不拉伸垂直对齐*/

/* align-content:flex-end;*/

/* 贴近底部不拉伸垂直对齐*/

/* align-content:center;*/

/* 整块垂直居中对齐*/

/* align-content:space-around;*/

/* 在项目的周围添加间隔平均的间隔*/

/* align-content:space-between;*/

/* 在垂直项目之间添加间隔，贴紧最顶和最低*/