布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。
采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目。
容器的属性如下：
-
flex-direction: row(起点在左端) | row-reverse（起点在右端） | column （起点在上）| column-reverse（起点在下）;
决定主轴的方向（即项目的排列方向）eg:row-reverse
-
flex-wrap: nowrap | wrap（换行，第一行在上方） | wrap-reverse（换行，第一行在下方）;
flex-wrap属性定义如果项目一条轴线排不下，如何换行。
eg:
-
flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
-
justify-content属性定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between(两端对齐) | space-around(每个项目两侧的间隔相等);
eg:space-around
center:
-
align-items属性定义项目在垂直交叉轴上如何对齐。
align-items: flex-start （交叉轴起点对齐）| flex-end（交叉轴终点对齐） | center（交叉轴中点对齐） | baseline（项目的第一行文字的基线对齐） | stretch（如果项目未设置高度或设为auto，将占满整个容器的高度。） -
align-content属性定义了多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;