|
flex-grow: number; ![]() ![]() ![]() 本例中,每個子元素為80*80的寬高,父元素為300*330的寬高哦!??!所以一行為3個且有剩余空間,剩余空間為60px(300-80*3=60) flex-grow: 0;(不分配,即為80*80) 在圖2中,第一行有且僅有②待分配,所以80+60=140(圖3的③同理),所以當一行有且僅有一個元素待分配時,他設(shè)置的flex-grow: number;這里的number設(shè)置為幾都是默認為1; 在圖2中,第二行有④⑥待分配且flex-grow: 1;所以60/2=30,80+30=110(待分配空間60除以要分配的2份,平均一份為30,加上原設(shè)置的子元素的寬度) 在圖3中,第二行有⑤⑥待分配且分配不均勻;flex-grow: 1;flex-grow:2;也就是要分3份,每一份為60/3=20,⑤的寬度為80+20=100px ; ⑥的寬度為80+20*2=120px。 |
|
|
來自: 偶記易方 > 《display:flex》