1. flex (弹性布局)
主要提供简便、完整、响应式布局解决方法，设置flex布局后元素的 float、clear、vertical-align属性将失效
主要参数：
- flex-direaction
- 决定主轴的方向
- 参数： - row(默认值): 主轴为水平方向，起点在左端 - row-reverse： 同上，起点在右端 - column： 主轴为垂直方向，起点在上方 - column-reverse： 同上，起点在下方
- flex-wrap
- 如果默认轴线排序不下，则换行
- 参数： - nowrap(默认): 不换行 - wrap： 换行，第一行在上方 - wrap-reverse： 换行，第一行在下方
- flex-flow
- 是flex-direaction 和 flex-wrap的简写
- justify-content
- 在主轴（水平）上的对齐方式
- 参数： - flex-start(默认值): 左对齐 - flex-end： 右对齐 - center： 居中 - space-between： 两端对齐，项目之间间隔相等 - space-around： 项目两侧有间隔，类似margin后的效果
- align-items
- 定义项目交叉（垂直）轴上如何对齐
- 参数： - flex-start: 起点对齐 - flex-end: 重点对齐 - center: 重点对齐 - baseline: 第一行文字的基线对齐 - stretch: 如果项目未设置高度或者auto，将占满整个容器
- align-content
- 多根轴线的对齐方式，单一不起作用
- 参数： - flex-start: 交叉轴 起点对齐 - flex-end: 交叉轴 终点对齐 - center: 交叉轴 中点对齐 - space-between: 交叉轴两端对齐，轴线之间平均分布 - sapce-around: 同margin - stretch: 占满整个交叉轴
其他参数
- order
定义上项目的排列顺序，数值越小，排列越靠前，默认为0
- flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink
定义项目的缩小比例，默认为1，空间不足，该项目将缩小
- flex-basis
在分配多余空间之前，先计算是否有多余空间
- flex
上面三个的简写
- align-self
允许单个项目和其他项目有不一样的对齐方式，可覆盖align-items属性， 默认auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch
