flex-grow: number; ![]() ![]() ![]() 本例中,每个子元素为80*80的宽高,父元素为300*330的宽高哦!!!所以一行为3个且有剩余空间,剩余空间为60px(300-80*3=60) flex-grow: 0;(不分配,即为80*80) 在图2中,第一行有且仅有②待分配,所以80+60=140(图3的③同理),所以当一行有且仅有一个元素待分配时,他设置的flex-grow: number;这里的number设置为几都是默认为1; 在图2中,第二行有④⑥待分配且flex-grow: 1;所以60/2=30,80+30=110(待分配空间60除以要分配的2份,平均一份为30,加上原设置的子元素的宽度) 在图3中,第二行有⑤⑥待分配且分配不均匀;flex-grow: 1;flex-grow:2;也就是要分3份,每一份为60/3=20,⑤的宽度为80+20=100px ; ⑥的宽度为80+20*2=120px。 |
|
来自: 偶记易方 > 《display:flex》