css3盒子模型微课_css3弹性盒模型详解

1、理解display:box,及其浏览器兼容情况。

为父元素添加display:box;即为弹性盒模型。

2、弹性盒模型各种属性的运用。

1、子元素的布局排列

box-orient:horizontal;  子元素水平排列布局

：vertical;  子元素垂直排列布局

2、子元素的排列顺序

box-direction:nomal; 子元素正序排列

：reverse; 倒叙排列；

3、如何让子元素混合排列。

box-ordinal-group:1; 规定某个元素排列的具体顺序，这里是排第一位。

4、子元素按比例分布显示。

E:nth-of-type(1){box-flex:1}; 把父元素分成6分，不同的元素所占的比例。

E:nth-of-type(2){box-flex:2};

E:nth-of-type(3){box-flex:3};

5、父元素的富裕空间的管理

box-pack:start;子元素从左开始排列，父元素的多余空间在右侧

:end; 子元素从右开始排列，父元素的多余空间在左侧

:center; 子元素在空间的中部，多余空间在两边

:justify;