1. 程式人生 > >新舊彈性盒模型差別

新舊彈性盒模型差別

1、在使用彈性盒模型的時候父元素必須要加display:box 或 display:inline-box:
    新版彈性盒模型:flex:display : flex
    老版彈性盒模型:box : display : -webkit-box
2、box-orient 定義盒模型的主軸方向
新版:flex:flex-direction: row / column
老版:box : -webkit-box-orient:
        horizontal 水平顯示
           vertical 垂直方向  
3、box-direction 元素排列順序
新版:flex : flex-direction: row-reverse / column-reverse;
老版:box : -webkit-box-direction:
           normal 正序
           reverse 反序
4、box-pack 主軸方向富裕的空間管理
     新版:flex : justify-content : flex-start / flex-end / center / space-between / space-around;
     老版:box : -webkit-box-pack
              start 所有子元素在盒子左側顯示,富裕空間在右側
              end 所有子元素在盒子右側顯示,富裕空間在左
              center 所有子元素居中
              justify 富裕空間在子元素之間平均分佈
5、box-align 側軸方向方向富裕的空間管理
     新版:flex : align-items : flex-start / flex-end / center / baseline
     老版:box : -webkit-box-align
              start 所有子元素在據頂
              end 所有子元素在據底
              center 所有子元素居中
6、Box-flex 定義盒子的彈性空間
     新版:flex : flex-grow
     老版:box : -webkit-box-flex
7、box-ordinal-group 設定元素的具體位置
     新版:flex : order
     老版:box : -webkit-box-ordinal-group