目录

1.flex-dirextion

2.flex-wrap和flex-flow

3.justify-content

4.align-items

5.order和flex-grow

1.flex-dirextion

该属性设置子项目的排列方向。

row:默认值，子项目水平方向排列，起点在左边。

row-reverse：子项目水平方向排列，起点在右边。

column：子项目垂直方向排列，起点在上面。

column：子项目垂直方向排列，起点在下面。

演示：

（垂直方向上的两个我就不演示了，大家自己动动手吧）

2.flex-wrap和flex-flow

flex-wrap设置子项目的换行方式。

nowrap：默认值，不换行。

wrap：换行，从上到下，第一行在上方。

wrap-reverse：换行，从下往上排列，第一行在下方

如图中，四个项目宽度加上margin是280px，但是容器宽度只有210px,无法容纳四个子项目的，实际效果，容纳了四个，没有换行，但是宽度都调小了。

现在增加flex-wrap属性：

flex-flow属性是flex-direction和flex-wrap的简写，属性值就是这两种的结合，默认值是row nowrap即水平方向排列，不换行。

3.justify-content

该属性设置子项目在主轴上的对齐方式。

flex-start：默认值，左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，子项目之间间隔相等。

space-around：每个子项目两侧的间隔相等。

这里的右对齐与上面flex-direction：row-reverse很像，但是有区别，这里是子项目1排在靠右，上面是4321。

4.align-items

该属性设置子项目在交叉轴（也就是垂直那条线）上的对齐方式。

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

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

center：与交叉轴的中点对齐。

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

stretch：默认值，如果子项目未设置固定高度或设为auto，将占满整个容器的高度。

5.order和flex-grow

这两个属性都是针对子项目设置的属性。

order属性设置子项目的排列顺序，数值越小越靠前，默认为0，支持负数。

排序应为4231：

flex-grow属性设置子项目的放大比例，若剩余空间不足则不会放大。默认为0，即不放大。

如果所有子项目的flex-grow属性都为1，则等分。如果一个是2，另外几个都为1，那么第一个比别的空间为2倍。