div盒布局

最近在应用程序中内嵌webkit浏览器显示网页，网页的布局是自适应的，采用盒布局模型，能够实现较好的自适应效果。
<style>
    html,body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    /*盒布局*/
    .box {
        display: -webkit-box;
    }

    /*垂直排列*/
    .box_vert {
        -webkit-box-orient:vertical;
    }

    /*水平排列*/
    .box_horz {
        -webkit-box-orient:horizontal;
    }
    
    /*box子元素顶部对齐*/
    .box_start_align {
        -webkit-box-align: start;
    }
    
    /*box子元素居中对齐*/
    .box_center_align {
        -webkit-box-align: center;
    }
    
    /*box子元素底部对齐*/
    .box_end_align {
        -webkit-box-align: end;
    }

    #container {
         100%;
        height: 100%;
        background-color: #f00;
    }
    
    #left {
         200px;
        background-color: #ff0000;
    }
    
    #left_header {
        -webkit-box-flex: 1;
        background-color: #888888
    }
    
    #left_header div {
         40px;
        height: 20px;
        margin-right: 10px;
        background-color: #00ffff;
    }
    
    #left_content {
        -webkit-box-flex: 20;
    }
    
    #right {
        -webkit-box-flex: 3;
        background-color: #00ff00;
    }
    
    #right_header {
        height: 100px;
        background-color: #333333;
    }
    
    #right_content {
         100%;
        -webkit-box-flex: 1;
        background-color: #ffff00;
    }
    
    
    #right_footer {
         100%;
        height: 100px;
        background: #ff00ff;
    }
</style>

<body>
    <div id="container" class="box box_horz">
        <div id="left" class="box box_vert">
            <div id="left_header" class="box box_horz box_center_align">
                <!--居中对齐-->
                <div>1</div>
                <div>2</div>
            </div>
            <div id="left_content"></div>
        </div>
        <div id="right" class="box box_vert">
            <div id="right_header"></div>
            <div id="right_content"></div>
            <div id="right_footer"></div>
        </div>
    </div>
</body>
最后的效果显示如下：