移动端flex页面布局

flex布局原理是：
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和
vertical-align 属性将失效。
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称
为 Flex 项目（flex item），简称"项目"。

它的父项常见属性有：
flex-direction：设置主轴的方向
如：flex-direction;row;默认从左到右排列
flex-direction;row-reverse;从右到左
flex-direction:column;从上到下
flex-direction;column-reverse；从下到上
justify-content：设置主轴上的子元素排列方式
如：justify-content;flex-start;默认值，从头部开始，如果主轴是x轴，从左到右
justify-content:flex-end;从尾部开始排列
justify-content:center;再主轴居中对齐
justify-content:space-around;评分剩余空间
justify-content:space-between;先两边贴边，再平分剩余空间
flex-wrap：设置子元素是否换行 ，默认不换行
如：justify-content:nowrap;不换行
justify-content:wrap;换行
align-content：设置侧轴上的子元素的排列方式（多行）默认是y轴
如： align-content:flex-start 从头部开始。默认在侧轴头部开始排列
align-content:flex-end 从侧轴尾部开始排列
align-content:center 在侧轴中间显示
align-content:space-around;子项在侧轴平分剩余空间
align-content:space-between;子项现在侧轴先分布在两头，在平分剩余空间
align-content:stretch 设置子项元素高度平分父元素高度
align-items：设置侧轴上的子元素排列方式（单行时使用）默认是y轴
如：align-items:flex-start 从头部开始
align-items:flex-end 从尾部开始
align-items:center 居中显示
align-items:stretch 拉伸
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
如：flex-flow:row wrap;
flex属性：flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
如：div {
flex:1;
}
order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为0，
但是，这里跟z-index;不一样
div {
order:;
}
另外，写页面常用的初始化样式：
```
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,“Lucida
Grande”,Verdana,“Microsoft Yahei”,STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}

另外，这次属性有点多，要多练习，练多了就记住了。