一、定义
Flex 布局，可以简便、完整、响应式地实现各种页面布局。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
以下6个属性设置在容器上。
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content二、应用
比如要实现整体布局呈现两列布局，如下操作：
wxml代码如下：
<view class="both-list column-2"> <view class="both-item backgorundWhite"> <text class="both-text">测试display属性</text> </view> <view class="both-item backgorundWhite"> <text class="both-text">dispaly:flex</text> </view> <view class="both-item backgorundWhite"> <text class="both-text">align-items</text> </view> <view class="both-item backgorundWhite"> <text class="both-text">flex-wrap</text> </view> <view class="both-item backgorundWhite"> <text class="both-text">flex-direction</text> </view> </view>wxss代码如下：
.both-list{ display:flex; flex-wrap:wrap; } .both-list>.both-item{ position: relative; display: flex; padding: 20rpx 0 30rpx; flex-direction: column; } .backgorundWhite{ background-color:#FFFFFF; text-align: center; } .column-2>view { width:50%; } .both-text{ padding:70rpx 0px 70rpx; } .both-list>.both-item:after { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height: 200%; border-right: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-radius: inherit; content: " "; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; } .both-list.col-2>.both-item:nth-child(2n):after{ border-right-width: 0; }三、解析
1）对最外围标签，也就是上面的both-list设置属性：display:flex;flex-wrap:wrap;
flex-wrap属性:如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。如果修改.both-list{display:flex;flex-wrap:nowrap;}则效果如下：
如果修改.both-list{display:flex;flex-wrap:wrap-reverse;}则效果如下：
2）flex-direction属性:属性决定主轴的方向(即项目的排列方向)
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。->column-reverse：主轴为垂直方向，起点在下沿。3）justify-content属性:定义了项目在主轴上的对齐方式。
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。首先我修改.column-2>view {width:40%;}，为了不占满全部宽度
然后设置.both-list{display:flex;flex-wrap:wrap;justify-content:flex-start;},效果如下：
如果设置为justify-content:flex-end;效果如下：
如果设置为justify-content:center;效果如下：
如果设置为justify-content:space-between;效果如下：
如果设置为justify-content:space-around;效果如下：
4）align-items属性：属性定义项目在交叉轴上如何对齐。（垂直轴）-针对内容
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。如果增加属性给.both-list>.both-item{align-items: flex-start;}，效果如下：
5)flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
6)align-content属性:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。