弹性盒模型
弹性盒模型
在使用弹性盒模型时,父级要添加display:box或者display:inline-box
Box-orient定义盒模型的布局方向
参数:Horizontal水平(默认)
Vertical垂直
Box-direction元素的排列顺序
参数:
Normal正序
Reverse倒序
Box-ordinal-group:设置元素的排序位置
用法:
在每一项上添加Box-ordinal-group:(number);
从1开始计算依次往后排序分
Box-flex定义盒子的弹性空间
用法:
在每一项上添加Box-flex:(number);
计算解析,将所有的数值相加,在用父级的宽度除以总数值,使他们平分
如果box-flex的value值是像素值的话,就是用父级宽度减去这个像素值,再进行 平分
Box-pack对盒子的富裕空间管理
参数:
star所有元素在盒子的左边显示,富裕空间在右边显示
End所有元素在盒子的右边显示,富裕空间在左边显示
Center所有元素在中间显示,富裕空间平分两边
Justify所有元素平均分布在盒子中
Box-align在垂直方向上对元素的位置进行处理
参数:
Star所有子元素在最顶
End所有子元素在最低
Center所有子元素在垂直居中