弹性盒子布局补充（FlexBox）

1.justify-content属性

这个属性可以水平对齐元素，且可使用以下几个参数：

• flex-start: 元素和容器的左端对齐。
• flex-end: 元素和容器的右端对齐。
• center: 元素在容器里居中。
• space-between:元素之间保持相等的距离。
• space-around:元素周围保持相等的距离。

2.align-items属性

这个属性可以纵向对齐元素，且可使用以下几个参数：

• flex-start: 元素与容器的顶部对齐。
• flex-end: 元素与容器的底部对齐。
• center: 元素纵向居中。
• baseline: 元素在容器的基线位置显示。
• stretch: 元素被拉伸以填满整个容器。

3.flex-direction属性

这个属性定义了元素在容器里摆放的方向，且可使用以下几个参数：

• row: 元素摆放的方向和文字方向一致。
• row-reverse: 元素摆放的方向和文字方向相反。
• column: 元素从上放到下。
• column-reverse: 元素从下放到上。
• 注意：当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。

4.order属性

order决定元素的顺序，属性默认值为0，但是我们设置这个属性为正数或负数。（...-1,0,1...）

5.align-self属性

这个属性是控制单个元素的，属性值与align-items属性一致

6.flex-wrap属性

定义flex元素必须在单行或者自动换行成多行

• nowrap: 所有的元素都在一行。
• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行。

7.flex-flow属性

flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

例如：用flex-flow: row wrap去设置行并自动换行

8.align-content属性

当交叉轴有多余空间时，对齐容器内的轴线（用align-content来决定行与行之间隔多远）

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。