Flex布局（弹性布局）

一、开启flex布局

在元素设置display: flex; 即开启flex布局。

二、flex的属性（父容器）

1. flex-direction 定义主轴的方向（即容器排列方向）

flex-direction: row | row-reverse | column | column-reverse;

row(默认值)：默认主轴为水平方向，即从左到右排列；
row-reverse：主轴为水平方向，从右向左排列；
column：主轴为垂直方向，从上到下排列；
column-reverse：主轴为垂直方向，从下往上排列；

2. flex-wrap 定义超出一条主轴后是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap(默认值)：默认不换行；
wrap：换行，第一行在上方，超出后从上往下依次排列；
wrap-reverse：换行，第一行在下方，超出后从下往上排列；

3. flex-flow 是flex-direction 和 flex-wrap的简写

flex-flow: { flex-direction } || { flex-wrap };

row nowrap(默认值)：默认主轴不换行；

4. justify-content 定义主轴的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(默认)：默认值，左对齐；
flex-end：右对齐；
center：居中对齐；
space-beween：两端对齐（两端贴边对齐）；
space-around：两侧对齐（两端间隔距离为中间间隔距离的一半）；

5. align-items 定义交叉轴的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴起点对齐；
flex-end：交叉轴尾部对齐；
center：交叉轴中点对齐；
baseline：与第一行文字的基线对齐
stretch(默认值)：如果项目未设置高度或设置为auto，则占满容器的高度；

6. align-content 定义多条轴线时的对齐方式（如果只有一条，则该属性不起作用）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：交叉轴起点对齐；
flex-end：交叉轴尾部对齐；
center：交叉轴中点对齐；
space-beween：交叉轴两端对齐（两端贴边对齐）；
space-around：两交叉轴两侧对齐（两端间隔距离为中间间隔距离的一半）；
stretch(默认值)：轴线占满整个交叉轴；

三、子容器属性（作用容器）

1. order 定义子容器的排列顺序。数值越小排列越靠前。

order: 0; // 默认为0;

2. flex-grow 定义子容器的放大比例。

flex-frow: 0; // 默认为0;

3. flex-shrink 定义子容器的缩小比例。

flex-shrink 1; // 默认为1;

4. flex-basis 定义子容器占据的主轴的空间。

flex-basis: auto | { length }px; // 默认auto;

5. flex 是flex-grow、flex-shrink、flex-basis的简写。

flex: none | { flex-grow } || { flex-shrink } | { flex-basis }; // 默认为 0 1 auto，flex-shrink、flex-basis可选
快捷值：auto || none;

6. align-self 定义单个子容器的对齐方式，默认继承父元素的align-items。

align-self: auto | flex-start | flex-end | center | baseline | stretch; // 默认auto;