三、Flex弹性布局

理解了上述两个概念，接下来我们就比较容易理解Flex弹性布局了。要是用弹性布局，块级元素设置display:flex;行内元素设置display:inline-flex;将该元素设置为Flex容器。表明该元素内的子元素将使用弹性布局。注意设置成Flex容器之后，内部子元素（以下称为子项）的浮动和对齐属性都会失效。接下来我们对Flex容器的各个属性进行说明。

• flex-direction 子项的排列方向，分为从左到右，从右到左，从上到下，从下到上
• flex-wrap 子项排列不下之后是否换行，分为不换行，排到下一行，排到上一行
• flex-flow 上面两个属性的组合，如可以直接设置从左到右排列，排不下排到下一行。
• justify-content 子项在排列方向上的对齐方式，（横向说明）分为左对齐，右对齐，居中对齐，两端对齐中间等分布局和全部等间距布局
• align-items 子项在另一个方向上的对齐方式，（横向说明）分为上对齐，下对齐，居中对齐，上下拉伸充满，子项首行文字对齐
• align-content 在子项内容排列多行时整体的对齐方式（就是设置行和行之间的排列），分为全部靠上、全部靠下、居中等，IE、Safari、Firefox不支持这个属性（小程序中完全支持）

1、flex-direction 子项的排列方向，分为从左到右，从右到左，从上到下，从下到上

1.1 row 从左到右display: flex;flex-direction:row;

1.2 row-reverse 从右到左display: flex;flex-direction:row-reverse;

1.3 column 从上到下display: flex;flex-direction:column;

1.4 column-reverse 从下到上display: flex;flex-direction:column-reverse;

2、flex-wrap 子项排列不下之后是否换行，分为不换行，排到下一行，排到上一行

2.1 nowrap 不换行display: flex;flex-direction:row;flex-wrap:nowrap;

这里外层容器和子项都设置了宽度，但实际的并没有效果，会自动扩展。

2.2 wrap 排到下一行display: flex;flex-direction:row;flex-wrap:wrap;

2.3 wrap-reverse 排到上一行display: flex;flex-direction:row;flex-wrap:wrap-reverse;

3、flex-flow 上面两个属性的组合，如可以直接设置从左到右排列，排不下排到下一行