容器项目属性

1.flex-direction属性，取值

row（默认值）：主轴为水平方向，起点在左端

Row-reverse：主轴为水平方向，起点为右端。

Column：主轴为垂直方向，起点在上沿。

Column-reverse：主轴为垂直方向，起点在下沿。

2.flex-wrap属性，取值

nowrap：默认不换行。

Wrap：换行第一行在上方。

Wrap-reverse：换行第一行在下方。

 

3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4.justify-content属性，取值

flex-start：左对齐。

Flex-end：右对齐。

Center：居中。

Space-between：两端对齐，项目之间的间隔都相等。

Space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。

 

5.aligan-items属性，取值

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐。

stretch(默认)：如果项目未设置高度或auto，将占满整个容器的高度。

 

6.align-content

取值：flex-start/flex-end/center/space-between/space-around/space-evenly /stretch(默认)

 

7.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前

8.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

9.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

10.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖width属性。