新版弹性盒
兼容到IE10及以上
display: flex;
设置为弹性盒（父元素添加）
flex-direction
用来来确定主轴的方向，从而确定基本的项目排列方向。
| 参数 | 说明 |
|---|---|
| row | （默认值）主轴为⽔平⽅向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在右端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿（反转纵向排列，从下往上排，最后一项排在最上面） |
justify-content（主轴对齐方式）
内容对齐,应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
| 参数 | 说明 |
|---|---|
| flex-start | （默认值）左对齐 |
| flex-end | 右对齐 |
| center | 居中对齐 |
| space-between | 两端对齐，中间自动分配 |
| space-around | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
align-items（侧轴对齐方式）
侧轴对齐方式
| 参数 | 说明 |
|---|---|
| flex-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界 |
| flex-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 |
| center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
| baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐 |
flex-wrap
默认情况下，项目都排在一条线上（又称“轴线”）上。 flex-wrap 属性定义，如果以条轴线排不下， 如何换行。
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 参数 | 说明 |
|---|---|
| nowrap | flex容器为单行。该情况下flex子项可能会溢出容器 |
| wrap | flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 |
| wrap-reverse | 反转 wrap 排列 |
align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。(属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用)
| 参数 | 说明 |
|---|---|
| stretch | （默认值）轴线占满整个交叉轴 |
| flex-start | 没有行间距 |
| flex-end | 底对齐没有行间距 |
| center | 居中没有行间距 |
| space-between | 两端对齐，中间自动分配 |
| space-around | 自动分配距离 |
align-self
属性规定灵活容器内被选中项目的对齐方式。
属性可重写灵活容器的 align-items 属性
| 参数 | 说明 |
|---|---|
| auto | （默认值）元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch" |
| stretch | 元素被拉伸以适应容器 |
| flex-start | 元素位于容器的开头 |
| flex-end | 元素位于容器的结尾 |
| center | 元素位于容器的中心 |
order
number排序优先级，数字越大越往后排，默认为0，支持负数。
flex
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
缩写「flex: 1」, 则其计算值为「1 1 0%」
缩写「flex: auto」, 则其计算值为「1 1 auto」
flex: none」, 则其计算值为「0 0 auto」
flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
flex三个属性值介绍
| 参数 | 说明 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量 |
| flex-basis | 项目的长度 |