分享

flex-grow — 剩余空间分配(扩展比率)

 偶记易方 2019-09-06

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。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约