css3 新旧伸缩盒的异同

由于不需要理会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;