电竞比分网-中国电竞赛事及体育赛事平台

分享

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的③同理),所以當一行有且僅有一個元素待分配時,他設(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。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多