css3中弹性盒子模型都有那些属性

Posted 2020-06-18 金甲

<div class="father">
    <div class="son0"></div>
    <div class="son2"></div>
　　<div class="son3"></div>
</div>

　 以上面的div结构为例：使用css3中的box的一些属性可以改变框内子元素的宽 高自适应，还可以改变子元素出现的顺序

1、box-orient 属性设置子元素的是水平或垂直排列，值有：horizontal and vertical;

2、box-ordinal-group 属性设置每一个元素出现的顺序，值为：1、2……依次排列；

3、box-flex 属性设置每一个子元素排列时宽或高的大小比例，如果其中一个子元素是固定宽度，那其他元素就按照比例划分剩下空间宽度；

4、如何设置子元素在框中的位置呢？ 那就使用 box-align  and  box-pack 两个属性配合使用改变水平和垂直位置；

5、box-direction 改变子元素在框中的排列方向 ,值：reverse  设置为反方向 ，比如：ABCD的反方向为DCBA

最为重要的就是：一定要把父元素框设置为：display:-webkit-box; 如果没有这一步其他的都白搭了；

display:box; box-orient and box-direction and box-align box-pack 都需要在父元素框的样式中设置；

box-ordinal-group  box-flex 都需要在子元素样式中设置；