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;

转载于:https://www.cnblogs.com/whxz/p/6475582.html