display属性
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
设置在容器上的属性有6种：
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-item
6.align-content
-
flex-direction属性：决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认）：主轴水平方向，起点在左端；
row-reverse：主轴水平方向，起点在右端；
column：主轴垂直方向，起点在上边沿；
column-reserve：主轴垂直方向，起点在下边沿。
-
flex-wrap属性：定义换行情况
-
flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
-
justify-content属性：定义项目在主轴上的对齐方式。
flex-end：右对齐；
center：居中；
space-between：两端对齐，项目之间间隔相等；
space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。
-
align-items属性：定义在交叉轴上的对齐方式
-
align-content属性：定义多根轴线的对齐方式