新舊彈性盒模型差別
阿新 • • 發佈:2018-12-09
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