成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入理解 flex-grow & flex-shrink & flex-basis

Richard_Gao / 1723人閱讀

摘要：前言有三個(gè)屬性值，分別是，，，默認(rèn)值是。的寬度分別是，父級(jí)的寬度是，父級(jí)寬減去子級(jí)的全部寬度，這樣剩余空間就是。當(dāng)然工作中最好用，更符合規(guī)范。如果父級(jí)的空間不夠有效，無效。

前言

flex 有三個(gè)屬性值，分別是 flex-grow， flex-shrink， flex-basis，默認(rèn)值是 0 1 auto。 發(fā)現(xiàn)網(wǎng)上詳細(xì)介紹他們的文章比較少， 今天就詳細(xì)說說他們，先一個(gè)一個(gè)看。

flex-grow

定義項(xiàng)目的放大比例，默認(rèn)值為0，就算存在剩余空間，也不會(huì)放大。單單幾句話肯定不能表達(dá)出意思，來看個(gè)DEMO。

flex-grow

flex-grow的默認(rèn)值為0，如果沒有定義該屬性，是不會(huì)擁有分配剩余空間的權(quán)利的。A, B, C, D, E 的寬度分別是 100, 120, 130, 100, 100，父級(jí)的寬度是660，父級(jí)寬減去子級(jí)的全部寬度，這樣剩余空間就是110。例子中B, C定義了flex-grow，分別是1，2，那剩余空間分成3份，B1份，C2份，比例就是1：2，分配計(jì)算出來的值就是B :36.666666666666664, C：73.33333333333333。這個(gè)時(shí)候剩余空間就被計(jì)算出來了，相加后的結(jié)果就是B：156.66666666666666，C：203.33333333333331。

B的計(jì)算公式：120 + (110 / 3) * 1

C的計(jì)算公式: 130 + (110 / 3) * 2

flex-shrink

定義項(xiàng)目的縮小比例，默認(rèn)值為1，注意前提是空間不足的情況下，看例子。

flex-shrink

這里 A, B, C 的寬度分別是155, 200, 50，(注意這里的寬度我是用flex-basis代替的，在這個(gè)例子中和width的作用是一樣的)。 父級(jí)寬度是300，計(jì)算超出的空間就是 -105，這樣超出的 105px 就要被 A, B, C 消化掉，比例是2：1：1。

如何消化 ？ 首先是每個(gè)項(xiàng)目的wdith值乘以flex-shrink值求積，

A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。

然后再求和所有項(xiàng)目的乘積。

(310 + 200 + 50) = 560

得到求占比之后還要乘以要騰出的空間。

A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375

得到每一項(xiàng)要騰出的空間後然後

A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625

好了，這樣就得出計(jì)算后的寬度了。

flex-basis

和width一樣，他的默認(rèn)值為auto，把上面幾個(gè)例子換成width也是一樣的。當(dāng)然工作中最好用flex-basis，更符合規(guī)范。

總結(jié)

如果父級(jí)的空間足夠：flex-grow有效，flex-shrink無效。

如果父級(jí)的空間不夠：flex-shrink 有效，flex-grow無效。

如果你有疑問歡迎討論，一起學(xué)習(xí)。

原文：https://xiecg.github.io/2016/...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111475.html

相關(guān)文章

  • 深入理解 flex-grow & flex-shrink & flex-basis

    摘要：前言有三個(gè)屬性值，分別是，，，默認(rèn)值是。的寬度分別是，父級(jí)的寬度是，父級(jí)寬減去子級(jí)的全部寬度，這樣剩余空間就是。當(dāng)然工作中最好用，更符合規(guī)范。如果父級(jí)的空間不夠有效，無效。 前言 flex 有三個(gè)屬性值，分別是 flex-grow， flex-shrink， flex-basis，默認(rèn)值是 0 1 auto。 發(fā)現(xiàn)網(wǎng)上詳細(xì)介紹他們的文章比較少， 今天就詳細(xì)說說他們，先一個(gè)一個(gè)看。 fl...

    libin19890520 評(píng)論0 收藏0

  • 深入理解Flex布局 -- flex-grow & flex-shrink & fl

    摘要：我希望實(shí)現(xiàn)一個(gè)左中右三列的布局，其中左右部分固定寬度，中間部分自適應(yīng)實(shí)現(xiàn)起來很簡(jiǎn)單，代碼如下到此為止一切都很美好。解決方法是給加上此時(shí)的完整代碼如下寬度為的內(nèi)容完整的在這里實(shí)戰(zhàn)經(jīng)驗(yàn)到此結(jié)束，下面我們?cè)偕钊雽W(xué)習(xí)涉及到的知識(shí)點(diǎn)。 歡迎關(guān)注我的公眾號(hào)睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 最近在項(xiàng)目...

    sydMobile 評(píng)論0 收藏0

  • CSS6：flex布局

    摘要：主要用來做橫向的布局。元素的布局學(xué)習(xí)我分成兩個(gè)部分，第一個(gè)部分是元素布局。以下幾個(gè)屬性影響著元素的布局。詳細(xì)還是看分鐘徹底弄懂布局講的非常明白。的時(shí)候，伸縮時(shí)需要考慮，按照進(jìn)行等比例伸縮。布局套路學(xué)習(xí)布局教程實(shí)例篇 前言：這是我看過最好的flex布局教程：30分鐘徹底弄懂flex布局 傳統(tǒng)的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...

    Jioby 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<