HTML5/CSS 使用Flex布局按比例布局

用flex按比例布局,以下代码为将一个box拆分成1:1:1

    <div class="box">
        <div class="sub">sub1</div>
        <div class="sub">sub2</div>
        <div class="sub">sub3</div>
    </div>


.box {
    width: 100%;
    height: 200px;
    border: 1px #ccc solid;
    /*flex布局*/
    display: -webkit-flex;
    display: flex;
    /*水平*/
    -webkit-flex-direction: row;
}
.box .sub {
    /*比例*/
    -webkit-flex: 1;
    border: #c0ff60 2px solid;
    height: 100%;
}