由于不需要理会IE浏览器，伸缩盒（flexible box）移动端开发中非常好用！
工作中使用APICLOUD开发手机App，老板要求兼容到安卓2.3（新版的需要安卓4.4以上），所以一直使用的是旧版的flexible box。现在整理一下新旧版本的部分常用属性的相同点和不同点，免得被人问起哑口无言。
相同功能的不同写法：
display: -webkit-box; // 旧display: flex; // 新// 排列方向-webkit-box-orient: horizontal | vertical; // 旧 ???flex-direction: ????row ???| column; // 新// 主轴上的对齐方式-webkit-box-pack: ???start ??| center | ???end ??| ???justify; // 旧 justify-content: flex-start | center | flex-end | space-between; // 新// 侧轴上的对其方式-webkit-box-align: ???start ??| center | ???end ??| baseline | stretch; // 旧 ?????align-items: flex-start | center | flex-end | baseline | stretch; // 新// 按比率来分配剩余空间-webkit-box-flex: 1; // 旧 ??????flex-grow: 1; // 新新伸缩盒才有的很有用的属性
// 定义某个flex子项单独在侧轴方向上的对齐方式。（旧版需要修改html结构实现）align-self: flex-start | center | flex-end | baseline | stretch;// 子项会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。justify-content: space-around;// 控制flex容器在子项尺寸超出的情况下是单行还是多行。（旧版无法实现，改用浮动布局实现）flex-wrap: nowrap | wrap | wrap-reverse// 控制某个子项出現的順序，数值小的排在前面。可以为负值。order: -1;css3 新旧伸缩盒的异同
原文地址：https://www.cnblogs.com/JRliu/p/8901546.html