Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提 供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }
行内元素也可以使用 Flex 布局。 .box{ display: inline‑flex;}
Webkit 内核的浏览器，必须加上‑webkit前缀。 .box{ display: ‑webkit‑flex; /* Safari */ display: flex;}
注意，设为 Flex 布局以后，子元素的float、clear和vertical‑align属性将失效。
flex‑direction：属性决定主轴的方向（排列方向），属性有：row 默认值 ；row-reverse，水平方向起点在右端；column：垂直方向起点在上方；column-reverse：垂直方向起点在下方。
flex-wrap：决定文本时一行显示还是换行显示，还有文本第一行的位置属性值有：
wrap：换行，第一行在上方；
nowrap：不换行一行显示，
wrap-reverse：换行第一行在下方显示。
justify‑content属性定义了项目在主轴上的对齐方式。
flex-start（默认值）：左对齐
flex-end：右对齐
space-between：两端对齐，项目之间间隔相等
center：居中
space-around；每个项目两侧的间隔相等，所以轴线之间的间隔要比轴线与框架的间隔要大一倍
align-content：定义了垂直居中的方式
flex-start，上对齐
flex-end，下对齐
content，居中
space-between：与交叉轴两端对齐，轴线之间间隔相等
space-around：每个轴线两侧的间隔都相等 所以轴线之间的间隔要比轴线与框架的间隔要大一倍
stretch：轴线占满整个交叉轴
