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;