flex-弹性布局

布局的传统解决方案，基于盒状模型，依赖 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;