前言：本篇随笔是对弹性盒子有了解的人来写的这篇文章，具体属性产生的效果这里不做说明，基础的东西去查文档。这里只是总结。
时至今日，css3的flex弹性盒子在移动端基本上都是支持的，但不排除有些些低版本的设备（Android4.4以下，只能兼容旧版的flexbox布局），还有个别的国产设备并不支持flex那么就需要用到旧版的flex-box。
在移动端布局呢，我们最常用的无非这么几种情况
1、垂直居中
2,、平分
3、分配剩余区域
那么我们需要用到新旧盒子的哪些属性呢？请看下面
一、开启弹性盒子
新：flex
display:flex
旧：display:flex-box
二、主轴的排列对齐方式
新：justify-content: flex-start | flex-end | center | space-between | space-around;
旧：box-pack: start | end | center | justify;
三、侧轴的排列对齐方式
新：align-items: flex-start | flex-end | center | baseline | stretch;
旧：box-align:box-align: start | end | center | baseline | stretch;
这里要重点提一下stertch:让子元素在侧轴方向拉伸占满盒子。
四、分配剩余空间
新：flex:
旧：box-flex
五、定义主轴（默认是x轴），还有排列的方向（默认是从左向右）
新：flex-direction: row | row-reverse | column | column-reverse;
旧：
box-direction: normal | reverse | inherit;
box-orient: horizontal | vertical | inline-axis（等同于horizontal） | block-axis(等同于vertical) |inherit;
说明：旧的用两个属性分别来控制主轴和排列方向，新的只用一个。
其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。
七、在移动端我们需要加上 -webkit-前缀
原文：http://www.cnblogs.com/lm-it/p/7360024.html