首先要知道在应用 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; }
原文：http://www.cnblogs.com/piercalex/p/3569673.html