这部分用到了flexbox的另外一个属性：指定元素沿主轴对齐方式 justify-content: flex-start | flex-end | center space-between | space-around; 将“沿着主轴对齐方式+沿着侧轴对齐的方式”设置为居中，无论子元素是什么形态，都可以随时随地的“水平垂直居中”了。

【Demo Link】:https://jsfiddle.net/tikizzz/zq8cdkfg/

7.用flex做垂直弹性布局

顶部栏，底部栏fixed，中间的元素支持滚动条，这是移动端常见的页面结构模型，我们熟称为“垂直弹性布局”。使用传统的flxed写法总是会给一些安卓机带来无法避免的烦人bug。其实只要巧妙利用flexbox的转换方向的属性，就可以轻松实现这个结构模型了。如下图，其实也就是一个横着的弹性伸缩模型，倒转垂直的弹性伸缩模型了。

这部分用到了flexbox的方向属性：指定主轴的伸缩流方向 flex-direction: row | column ; 这里注明一下，box-orient，box-direction是最老版本flex-box控制方向的2种写法，默认方向均为横向，为保证兼容性，我们需要将它们2条都写全。

【Demo Link】:https://jsfiddle.net/tikizzz/obLp1mga/

最后，附赠一个全DEMO的合集：

希望以上的demo对移动端开发的小伙伴们有用。当然，flexbox还有一些很帅气的属性，例如order，wrap等等，它们只是暂时还不被移动端所有的系统兼容，咋们的x5内核已经刚刚表示全面兼容flexbox的所有属性。关于flexbox的未来我们敬请期待就好！ 另，附赠  <<移动端属性全兼容自查表>>

已测机型

备注：

1.以上机型是根据友盟，应用宝，微信及腾讯云运营活动数据统计整合得出的Top7机型。

2.Top8-10的华为，oppo，魅族机型挑选于各品牌的占比最高机型，为品牌差异性测试而存在。

3.黄色标注的分辨率为Top6的热门分辨率，占比超过iOS市场87%，Android市场的50%（安卓分辨率太多，剩余50%分辨率占比较为均分零散，故暂不列入必测范围）。

4.iOS8.0+，Android4.0+涵盖了移动端90%的系统，其中iOS9.0+占比超过65%，Android4.4+占比超过60%，测试用例不强行要求涵盖各机型所有版本的系统，以最新版本为准，若因老版本出现bug次数大于3次，再加设为必测的问题版本。