移动端flex布局

flex布局也称为弹性布局，通过给父盒子添加flex属性来控制子盒子的位置和排列方式，任何一个容器都可以指定为flex布局。当父盒子设定flex后，子盒子的float、clear和vertical-align将失效。
webkit内核的浏览器必须加上-webkit的前缀

div {
     display: -webkit-flex;
     display: flex;
     }

flex布局父盒子常见属性

1. flex-direction：设置主轴的方向
2. justify-content：设置主轴上子元素的排列方式
3. flex-wrap：设置子元素是否换行
4. align-content：设置侧轴上的子元素的排列方式（多行）
5. align-items：设置侧轴上的子元素的排列方式（单行）
6. flex-flow：复合属性，相当于设置了flex-direction、flex-wrap。

1.flex-direction
row: 沿水平方向从左至右，为默认值
row-reverse: 沿水平方向，从右至左
column：沿垂直方向，从上至下
column-reverse：沿垂直方向，从下至上

2. justify-content
flex-start: 默认值，从头部开始，如果主轴是x轴则从左至右（左对齐）
flex-end：从尾部开始排列（右对齐）
center: 在主轴居中对齐
space-around： 平分剩余空间
space-between： 先放在两边，再平分剩余空间

3. flex-wrap
用于设置当前项目在盒子中一行无法显示，默认是不换行。当子盒子总宽度超过父盒子且不换行时，则会缩小子盒子的宽度，使得所有子盒子一行显示。
wrap： 换行
nowrap： 不换行

4. align-content
该属性定义多根轴线的对齐方式，如果只有一条轴线，则该属性没有作用
flex-start： 与交叉轴的起点对齐（从上到下）
flex-end： 与交叉轴的终点对齐 （从下到上）
center： 与交叉轴的中点对齐（垂直居中）
space-between： 与交叉线两端对齐，轴线之间的间隔平均分配
space-around： 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
stretch：默认值，拉伸

5. align-items
flex-start： 与交叉轴的起点对齐（从上到下）
flex-end： 与交叉轴的终点对齐 （从下到上）
center： 与交叉轴的中点对齐（垂直居中）
baseline：第一行文字的基线对齐
stretch：默认值，若父盒子没有设置高度或高度为auto，将占满整个父盒子的高度

6. flex-flow
第一个属性为flex-direction的值，第二个属性为flex-wrap的值

flex布局子盒子常见的属性

1. flex：子项目占有的份数
2. align-self：控制子元素在侧轴的排列方式
3. order：定义子元素的排列顺序，默认值为0，数值越小越靠前

align-self
auto： 和父元素align-self的值一致，默认值
flex-end : 底部对齐
flex-start：顶端对齐
center：竖直方向上居中对齐
baseline：item第一行文字的底部对齐
stretch：当item未设置高度时，item将和容器等高对齐
注：可允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认auto表示继承父盒子的align-items，若没有父盒子则等同于stretch。