css flex flex-grow属性设置子元素放大比例

css flex flex-grow属性设置子元素放大比例，如果父元素有剩余空间而所有子元素的flex-grow属性设置为1，那么这些子元素等分剩余空间。如果子元素B的flex-grow属性为2，其他子元素都为1，那么B元素占据的剩余空间将比其他子元素多一倍。flex-grow的默认值为0。

所有子元素默认为0的情况

这种情况下A、B、C的宽度为父元素的20%，不进行放大 

#boxs
{
    width:60%;
    height:100px;
    border:1px solid #333;
    display:flex;
}
#boxs div
{
    width:20%;
}
<div id="boxs">
    <div style="background-color:#ffc5c5;flex-grow:0;" >元素A</div>
    <div style="background-color:#7171f7;flex-grow:0;" >元素B</div> 
    <div style="background-color:#c6d8c6;flex-grow:0;">元素C</div>
</div>

例子

所有子元素flex-grow为1的情况

这种情况下A、B、C将等比例占据剩余空间

例子

B元素flex-grow为2的情况

注意不是B元素的宽度是是A、C的一倍, 而是B元素占用的剩余空间是A、C的一倍

例子