2018-04-10 display: flex

参考文章
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

弹性盒子布局：
六大参数含义

flex-direction　　容器内项目的排列方向(默认横向排列)　　
flex-wrap　　容器内项目换行方式
flex-flow　　以上两个属性的简写方式
justify-content　　项目在主轴上的对齐方式
align-items　　项目在交叉轴上如何对齐
align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

每个参数的变量：
flex-direction: row | row-reverse | column | column-reverse;
属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse

flex-wrap: nowrap | wrap | wrap-reverse;
属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（你懂的~）
上面两个属性的二合一写法如下：
flex-flow: <flex-direction> || <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around;
项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)
flex-start：在主轴上由左或者上开始排列
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch
这些参数的设置含义，详见参考文章的配图。

align-content: flex-start | flex-end | center | space-between | space-around | stretch
这些参数的设置含义，详见参考文章的配图