flex布局为弹性布局，在布局方便提供很大的便利。
flex布局的定义
Flex是Flexible Box的缩写，意为"弹性布局"，任何一个容器都可以指定为Flex布局。
.box{ display:flex | inline-flex; display: -webkit-flex | -webkit-inline-flex; }
ps：设置为flex后，子元素的float，vertical-align,clear属性会失效。
flex父元素属性
1. flex-direction：指定项目排列方式。
.box{ flex-direction: row | row-reverse | column | column-reverse; }
-row:默认值，水平排列，起点在左端。
-row-reverse:水平排列，起点在右端。
-column:垂直排列，起点在上端。
-column-reverse:垂直排列，起点在下端。
2. flex-wrap:如果一行排不下，指定换行方式。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
-nowrap:默认值，不换行。
-wrap:换行，第一行在上方。
-wrap-reverse:换行，第一行在下方。
3. flex-flow:是flex-direction和flex-wrap的简写形式。
.box { flex-flow: <flex-direction> || <flex-wrap>; }
默认值为row || nowrap。
3.justify-content:项目对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
-flex-start:默认值，左对齐。
-flex-end:右对齐。
-center：居中。
-space-between:两端对齐，各个项目间隔都相等。
-space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
4.align-items:定义项目对齐方式。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
-stretch:默认值，若未设置高度或者高度为auto，则占满整个高度。
-flex-start:起点对齐。
-flex-end:终点对齐。
-center:中点对齐。
-baseline:项目的第一行文字的基线对齐。
5.align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
-stretch:默认值，轴线占满整个交叉轴。
-flex-start:起点对齐。
-flex-end:终点对齐。
-center:中点对齐。
-space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
-space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
flex子元素属性
1.order：定义项目排列顺序，数字越小，排列越靠前，默认值为0。
.item { order: <integer>; }
2.flex-grow：项目放大比例，默认值为0，即为存在剩余空间值也不放大。
.item { flex-grow: <number>; }
如果所有项目的flex-grow属性都为1，则他们将等分剩余空间（如果有的话）。如果其中一个flex-grow为2，其他都为1,则为2的占据剩余空间将比其他项目多1倍。
3.flex-shrink：定义项目缩小比例，默认为1，即为空间不足，项目将缩小。
.item { flex-shrink: <number>; }
如果所有项目flex-shrink的值都为1，当空间值不足时，都将等比缩小。若其中一个flex-shrink为0，其他都为1，则空间不足时，为0的不缩小。
4.flex-basis：在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即为项目本来大小。
.item { flex-basis: <length> | auto; }
5.flex ：是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。align-items
6.align-self：允许有与其他项目不一样的对齐方式，覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若没有父元素，等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性除了auto，其他与align-item属性完全一致。