css display:box 属性之一box-orient:horizontal/vertical

在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;

一：box-flex:number
1，占父级元素宽度的number份

2，若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数

3，若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

二，box-orient:horizontal/vertical

在父级上设置该属性，则子代按水平排列或竖直排列。
注：所有主流浏览器不支持该属性，必须加上前缀。
1，horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
2，vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度
horizontal：
css:

.box {
            width: 600px;
            height: 200px;
            display: -moz-box;
            display: -webkit-box;
            display: box;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            box-orient: horizontal;

        }

        .item1 {
            background: red;
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
        }

        .item2 {
            background: black;
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            box-flex: 2;

        }

        .item3 {
            width: 100px;
            background: green;
        }

效果：

vertical：
css：

.box {
            width: 600px;
            height: 200px;
            display: -moz-box;
            display: -webkit-box;
            display: box;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            box-orient: vertical;

        }

        .item1 {
            background: red;
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
        }

        .item2 {
            background: black;
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            box-flex: 2;

        }

        .item3 {
            width: 600px;
            background: green;
        }

效果：