flex布局
阮一峰：flex布局教程http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
注意点：
- 任何一个容器都可以指定为flex布局
- 行内元素也可以使用flex布局：display：inline-flex
- webkit内核的浏览器，必须加上-webkit前缀：display:-webkit-flex;
- ** 父元素设置flex布局后，子元素的float、clear、vertical-align属性将失效
基本概念
容器：flex容器
Flex项目：所有flex容器的子元素
容器属性（6个）
flex-direction属性：决定主轴的排列方向
row:默认值，主轴为水平方向，起点为左端
row-reverse: 主轴为水平方向，起点为右端
column:主轴为垂直方向，起点为上端
column-reverse: 主轴为垂直方向，起点为下端
flex-wrap属性：如果一条轴线放不下，如何换行
nowrap:默认值，不换行
wrap: 换行，第一行在上方
wrap-reverse：换行，第一行在下方
flex-flow属性：flex-direction属性和flex-wrap属性的简写形式
row nowrap : 默认值
justify-content属性：主轴上的对齐方式
flex-start: 左对齐
flex-end: 右对齐
center: 水平居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 环绕对齐，项目之间的间隔是两端间隔的两倍
align-items：交叉轴上的对齐方式
flex-start: 交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴居中对齐
baseline：第一行文字的基线对齐
stretch：默认值，拉伸对齐。子项目将占满整个容器高度
align-content: 多根轴线时，对齐方式，类似justify-content或 align-items
项目属性（6个）
order：项目排列顺序，数字越小越靠前，默认为0
flex-grow：项目放大比例，默认为0，既该项目占剩余空间的比例
flex-shrink：项目缩小比例，默认为1
flex-basis：项目在分配多余空间之前，项目占据的主轴空间
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为：0 1 auto
align-self：单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
auto：默认值
flex-start
flex-end
center
baseline
stretch