弹性布局主要有两类属性，一类设置在容器上，一类设置在容器内的项目上
容器类属性
| 属性 |
说明 |
值 |
| flex-direction |
设置主轴的方向 |
row | row-reverse | column | column-reverse |
| flex-wrap |
设置是否换行以及如何换行 |
nowrap | wrap | wrap-reverse |
| flex-flow |
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
|
| justify-content |
定义了项目在主轴上的对齐方式 |
flex-start | flex-end | center | space-between | space-around |
| align-items |
定义项目在交叉轴上如何对齐 |
flex-start | flex-end | center | baseline | stretch |
| align-content |
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 |
flex-start | flex-end | center | space-between | space-around | stretch |
项目类属性
| 属性 |
说明 |
值 |
| order |
定义项目的排列顺序 |
数值越小，排列越靠前，默认为0 |
| flex-grow |
义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 |
|
| flex-shrink |
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 |
|
| flex-basis |
定义了在分配多余空间之前，项目占据的主轴空间（main size） |
|
| flex |
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto |
|
| align-self |
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 |
auto | flex-start | flex-end | center | baseline | stretch |
