css flex 教程

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的一倍

例子

Catalog
css flex 教程 父元素属性 flex-direction 属性 flex-wrap 属性 flex-flow 属性 justify-content 属性 align-items 属性 align-content 属性 子元素属性 order 属性 flex-grow 属性 flex-shrink 属性 flex-basis 属性 flex 属性 align-self 属性 常见用例 左边固定右边自适应 右边固定左边自适应 两边固定中间自适应 上下固定中间自适应 css flex 1 省略号