box-flex的值得意义

box-flex主要让子容器针对父容器的宽度按一定规则进行划分

html代码：
<article>
    <section>01</section>
    <section>02</section>
    <section>03</section>
</article>
CSS代码：
.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：

转载至：https://www.cnblogs.com/cainiaoz/p/4148042.html