伸缩盒 Flexible Box(旧)

box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines

（1）box-flex：<number>

　　注意两点即可 a: 以上所有元素必须结合“display: -webkit-box;”使用，父类的样式里必须有改属性

　　　　　　　　 b: 父类剩余空间按百分比分配

(2) box-orient: horizontal | vertical | inline-axis | block-axis 判断子元素是水平还是垂直显示

　　注意 a: block-axis和horizontal 的话，box-flex的数值就好像没有效果了

(3) box-flex-group: <integer>

动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）

.box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    background: #000;
    width: 240px;
    height: 100px;
    margin: 0;
    padding: 10px;
    list-style: none;
    vertical-align: top;
    /* -webkit-box-orient: vertical; */
}
.box li:nth-child(1) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex-group: 1;
    -moz-box-flex-group: 1;
    -ms-box-flex-group: 1;
    background: #666;
}
.box li:nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex-group: 2;
    -moz-box-flex-group: 2;
    -ms-box-flex-group: 2;
    background: #999;
}
.box li:nth-child(3) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex-group: 1;
    -moz-box-flex-group: 1;
    -ms-box-flex-group: 1;
    background: #ccc;
}

View Code

(4)box-ordinal-group:<integer>

　　用整数值来定义伸缩盒对象的子元素显示顺序。

　　注意 a: 值越大越往后

(5)box-direction:normal | reverse

　　注意 a: reverse只是顺序上的改变，并不是以y 轴旋转

(6) box-lines：single | multiple

　　注意 a: 目前所有主流浏览器都不支持box-lines属性

分析情况都是在box-orient: horizontal时

（7）box-pack：start \| center \| end \| justify	(8)box-align:start \| end \| center \| baseline \| stretch
水平的 start 相当于左对齐 center 左右居中 end 右对齐 justify 两端对齐	start从元素其实对齐 center 上下对齐 end 底端对齐 stretch横向排列时子元素自适应父元素

分析情况都是在box-orient: vertical 时，两者恰好相反