CSS3彈性盒模型新版和老版寫法差異

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 與當前的寫模式相同，例如 中...