由於不需要理會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 新舊伸縮盒的異同