微信小程序flex布局

最近在学习微信小程序，新认识了一种布局方式display:flex

 .container {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
 }

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），它里面的子元素都是容器成员。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

• flex-direction 容器内项目的排列方向(默认横向排列)
• flex-wrap 容器内项目的换行方式
• flex-flow 以上两种属性的简写方式
• justify-content 项目在主轴上的对齐方式
• align-items 项目在交叉轴上的对齐方式
• align-content 定义了多根轴的对齐方式。如果只有一根轴线，该属性不起作用。

1. flex-direction 可选的属性值如下：
row :从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column:从上到下的垂直方向为主轴
column-reverse从下到上的垂直方向为主轴

2. flex-wrap 可选的属性值如下：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3. flex-flow 可选的属性值如下：
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: flex-direction || flex-wrap;

4. justify-content 可选的属性值如下：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items 可选的属性值如下：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content 可选的属性值如下：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。