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

<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 都需要在子元素样式中设置;

你可能感兴趣的:(css3中弹性盒子模型都有那些属性)