flex布局容器器六⼤属性

1. flex-direction属性决定主轴的方向

值	描述
row	默认值。主轴为水平⽅方向，起点在左边。
row-reverse	主轴为水平⽅方向，起点在右边。
column	主轴为垂直方向，起点在上面。
column-reverse	主轴为垂直方向，起点在下面。

2. flex-wrap属性设置⼦项目的换行方式

值	描述
nowrap	默认值。不换行
wrap	换⾏，从上往下排列，第⼀行在上方。
wrap-reverse	换行，从下往上排列，第一行在下方。

3. flex-flow属性是flex-direction属性和flex-wrap属性的简写⽅式，默认值是row nowrap。

4. justify-content属性设置子项目在主轴上的对齐方式。

值	描述
flex-start	默认值。左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，子项目之间隔一样
space-around	每个子项目两侧的间隔一样。

5. align-items属性规定子项目在交叉轴上的对齐方式

值	描述
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	以子项目的第一行文字为基线对齐
stretch	默认值。如果项目未设置固定高度，将占满整个容器的高度。

6. align-content多行情况下的对齐方式，类似justify-content的对齐⽅式

值	描述
flex-start	与交叉轴的起点对⻬
flex-end	与交叉轴的终点对⻬
center	与交叉轴的中点对⻬
spacebetween	与交叉轴的两端对⻬，每⾏之间间隔⼀样
spacearound	每⾏上下的间隔⼀样
stretch	默认值。未设置⾼高度将占满整个空间，如设置的⾼高度不够则每⾏下方填充空⽩填满容器