干啥的双藕？
根據(jù)彈性盒子元素所設(shè)置的擴(kuò)展因子作為比率來分配剩余空間。
這定義讀起來這拗口烹棉。實(shí)際很簡(jiǎn)單攒霹。比如說你定義了一個(gè)父容器，寬度600px浆洗。然后定義了3個(gè)子容器催束，寬度分別是200px，50px辅髓，50px泣崩。那么你這三個(gè)自容器勢(shì)必不能占滿你這個(gè)父容器。
恩洛口，那么如果想讓他占滿呢矫付？那你設(shè)置成加起來等于600不玩了。 除此之外第焰，還有別的辦法买优。彈性布局嘛
600-200-50-50=300px
還剩300.比如說我這300想按1：3的比例分給第二和第三個(gè)自容器。
flex-grow就是干這事的挺举。
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<style>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li:nth-child(1){width:200px;background:palevioletred;}
.flex li:nth-child(2){flex-grow:1;width:50px;background: paleturquoise;}
.flex li:nth-child(3){flex-grow:3;width:50px;background: peachpuff;}
</style>
怎么算的呢杀赢？
flex-grow的默認(rèn)值為0，如果沒有顯示定義該屬性湘纵，是不會(huì)擁有分配剩余空間權(quán)利的脂崔。
本例中b,c兩項(xiàng)都顯式的定義了flex-grow，flex容器的剩余空間分成了4份梧喷，其中b占1份砌左，c占3分，即1:3
flex容器的剩余空間長(zhǎng)度為：600-200-50-50=300px铺敌，所以最終a,b,c的長(zhǎng)度分別為：
a: 50+(300/4)=200px
b: 50+(300/41)=125px
a: 50+(300/43)=275px
image.png
總結(jié)
就是把父容器剩余的給按比例分配一下
