布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
采用 Flex 布局的元素，任何一个容器都可以指定为 Flex 布局：
1.容器默认存在两根轴：横轴和纵轴
2.采用flex布局的元素，称为flex容器，简称”容器”。它的所有子元素称为flex项目
3. 要设为flex布局，必须先设置display:flex
容器的属性：
1. flex-direction：规定容器中的项目是按行排列还是按列排列
注意：当将flex-direction设为column值时，align-items作用于横轴，justify-content作用于纵轴
2. justify-content：定义了项目在“横轴”上的对齐方式（横轴是相对概念）
3. align-items：定义了项目在“纵轴”上的对齐方式（纵轴是相对概念）
基线的定义：
4. flex-wrap：规定项目排列是否换行
5. flex-flow：flex-direction flex-wrap
6. aling-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。这里的多根轴线代表项目既按横轴排列，又按纵轴排列（即不设置flex-direction）
7. order：属性定义项目的排列顺序。数值越小，排列越靠前。默认为0。
8. flex-grow：属性定义了项目的放大比例。默认为0。即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。