弹性盒模型

弹性盒模型 

　在使用弹性盒模型时，父级要添加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所有子元素在垂直居中

转载于:https://www.cnblogs.com/yangrui2018/p/6754035.html