box-flex等分总结

首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box 其子容器才可以进行划分。

.box{
     display: -webkit-box;
     display: -moz-box;
     display:box;
}

.sbox1 {
     -moz-box-flex:3;
     -webkit-box-flex:3;
     box-flex:3;
}

.sbox2 {
     -moz-box-flex:2;
     -webkit-box-flex:2;
     box-flex:2;
}

.sbox3 {
     -moz-box-flex:1;
     -webkit-box-flex:1;
     box-flex:1;
}

由于三个子容器 sbox1-3 共同将父容器 box 分成了 3+2+1=6 份以横向排列。这里需要知道，这6份是依据父级容器 box 所剩 “自由空间” 来进行分配。如果将其中 sbox3 宽度给予实数 width:600px; 并去掉 box-flex 属性，那么 box 会先减去 sbox3 实数宽度后再给 sbox1 sbox2 划分。

默认情况是横向划分，如果要纵向划分那么需要给父级容器再添加样式 box-orient:vertical 

.box {
     -moz-box-orient:vertical;
     -webkit-box-orient:vertical;
     box-orient:vertical;
}