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
star 所有子元素在據頂
end 所有子元素在據底
center 所有子元素居中
6、box-flex 定義盒子的彈性空間
新版:flex : flex-grow
老版:box : -webkit-box-flex
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和
7、box-ordinal-group 設定元素的具體位置
新版:flex : order
老版:box : -webkit-box-ordinal-group
CSS3彈性盒模型新版和老版寫法差異
1 在使用彈性盒模型的時候父元素必須要加display box 或 display inline box 新版彈性盒模型 flex display flex 老版彈性盒模型 box display webkit box 2 box orient 定義盒模型的主軸方向 新版 flex flex dir...
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定,兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局,這使布局更簡單,其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse,用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同,例如 中...