容器属性

flex-direction决定主轴的方向。即项目的排列方向

flex-wrap项目在容器轴线排不下如何换行。

flex-flow是前两个属性的缩写。

justify-content项目在容器主轴上对齐方式。

align-items项目在交叉轴上如何对齐。

align-content多根轴线的对齐方式。

1、flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

row(默认值)：主轴为水平方向，起点在左端。

row-reverse:主轴水平方向，起始点在右端。

column:主轴为垂直方向，起点在上沿。

column-reverse:主轴在垂直方向，起点在下沿

2、flex-wrap

如果一条轴线排不下，如何换行。

nowrap默认不换行

wrap换行第一行在上方

wrap-reverse倒着换行，第一行在下方。

3、Justify-content（主轴对齐方式/横轴）

flex-start:默认值左对齐

flex-end:右对齐

center:居中

space-between:两端对齐，项目之间的间隔都相等

space-around:每个项目两侧的间隔相等

4、align-items 单行（垂直居中使用这个）

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

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

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

baseline： 以文字底部对齐

stretch（默认值）轴线占满整个交叉轴（需去除高度）

5、align-content（纵轴对齐方式）多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。

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

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

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

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间 隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴

flex子元素属性

order

order属性可以定义元素的排列顺序。元素的默认数值为0，一般来说，数值越小，排列越靠前。

flex-grow

flex-grow属性定义项目的放大比例，默认为0。即使存在剩余空间，也不会放大。

如果上述的子元素的flex-grow值都为1，那么四个子元素会平均分配剩余空间。

如果其中某个子元素的flex-grow属性为2，那么和其他三个分配剩余空间的比例关系就是2:1:1:1。

flex-shrink

flex-shrink属性定义了元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大缩小比例越大

如果所有的子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子元素的flex-shrink属性为0，当空间不足时，这个子元素不会缩小。

flex-basis

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间。浏览器会根据这个属性，来计算主轴的空间使用。默认值为auto。即为子元素本来的大小。

可以将其设为和width和height一样的大小，这样的话子元素将占据固定的空间。

align-self

align-self 属性允许单个子元素与其他项目采用不一样的对齐方式，可以覆盖flex容器属性中的align-items属性值。默认为auto，表示继承自父元素的align-items属性，如果没有父元素属性，则等同于stretch。

.item{align-self: auto | flex-start | flex-end | center | baseline | stretch;}

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex等于数值的情况如下:

flex: 1

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0%;

flex: 2

flex-grow: 2;

flex-shrink: 1;

flex-basis: 0%;

flex: n

flex-grow: n;

flex-shrink: 1;

flex-basis: 0%;

flex等于带有单位的值情况如下：

flex: 100px

flex-grow: 1;

flex-shrink: 1;

flex-basis: 100px;

flex: 200px

flex-grow:1;

flex-shrink: 1;

flex-basis: 200px;

flex: length

flex-grow:1;

flex-shrink:1;

flex-basis: length;

flex的值为两个值并且没有单位的时候:

flex: 1 2;

flex-grow:1;

flex-shrink: 2;

flex-basis:0%;

flex: 2 3;

flex-grow: 2;

flex-shrink: 3;

flex-basis: 0%;

flex: num1 num2;

flex-grow: num1;

flex的值为三个值的时候，分别为flex-grow、flex-shrink、flex-basis。

flex的值为none的时候，flex-grow的值为0，flex-shrink的值为0，flex-basis的值为auto。

flex的值为auto的时候，flex-grow的值为1，flex-shrink的值为1，flex-basis的值为auto。

flex-shrink: num2;

flex-basis: 0%;

flex的值为两个值并且第二个值具有单位的时候:

flex: 1 200px;

flex-grow: 1;

flex-shrink: 1;

flex-basis: 200px;

flex: 2 200px;

flex-grow: 2;

flex-shrink: 1;

flex-basis: 200px;

flex: num length;

flex-grow: num;

flex-shrink: 1;

flex-basis: length;