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

前言

flex 有三個屬性值,分別是 flex-growflex-shrinkflex-basis,默認值是 0 1 auto。 發現網上詳細介紹他們的文章比較少, 今天就詳細說說他們,先一個一個看。git

flex-grow

定義項目的放大比例,默認值爲0,就算存在剩餘空間,也不會放大。單單幾句話確定不能表達出意思,來看個DEMO。github

flex-grow學習

flex-grow的默認值爲0,若是沒有定義該屬性,是不會擁有分配剩餘空間的權利的。A, B, C, D, E 的寬度分別是 100, 120, 130, 100, 100,父級的寬度是660,父級寬減去子級的所有寬度,這樣剩餘空間就是110。例子中B, C定義了flex-grow,分別是1,2,那剩餘空間分紅3份,B1份,C2份,比例就是1:2,分配計算出來的值就是B :36.666666666666664, C:73.33333333333333。這個時候剩餘空間就被計算出來了,相加後的結果就是B:156.66666666666666,C:203.33333333333331flex

B的計算公式:120 + (110 / 3) * 1.net

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

flex-shrink

定義項目的縮小比例,默認值爲1,注意前提是空間不足的狀況下,看例子。get

flex-shrinkit

這裏 A, B, C 的寬度分別是155, 200, 50,(注意這裏的寬度我是用flex-basis代替的,在這個例子中和width的做用是同樣的)。 父級寬度是300,計算超出的空間就是 -105,這樣超出的 105px 就要被 A, B, C 消化掉,比例是2:1:1io

如何消化 ? 首先是每一個項目的wdith值乘以flex-shrink值求積,總結

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

而後再求和全部項目的乘積。

(310 + 200 + 50) = 560

獲得求佔比以後還要乘以要騰出的空間。

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

獲得每一項要騰出的空間後然後

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

好了,這樣就得出計算後的寬度了。

flex-basis

width同樣,他的默認值爲auto,把上面幾個例子換成width也是同樣的。固然工做中最好用flex-basis,更符合規範。

總結

若是父級的空間足夠:flex-grow有效,flex-shrink無效。

若是父級的空間不夠:flex-shrink 有效,flex-grow無效。

若是你有疑問歡迎討論,一塊兒學習。

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

相關文章
相關標籤/搜索