flex
有三個屬性值,分別是 flex-grow
, flex-shrink
, flex-basis
,默認值是 0 1 auto
。 發現網上詳細介紹他們的文章比較少, 今天就詳細說說他們,先一個一個看。git
定義項目的放大
比例,默認值爲0
,就算存在剩餘空間,也不會放大。單單幾句話確定不能表達出意思,來看個DEMO。github
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.33333333333331
。flex
B的計算公式:120 + (110 / 3) * 1
.net
C的計算公式: 130 + (110 / 3) * 2
code
定義項目的縮小
比例,默認值爲1
,注意前提是空間不足的狀況下,看例子。get
這裏 A, B, C
的寬度分別是155, 200, 50
,(注意這裏的寬度我是用flex-basis
代替的,在這個例子中和width
的做用是同樣的)。 父級寬度是300
,計算超出的空間就是 -105
,這樣超出的 105px
就要被 A, B, C
消化掉,比例是2:1:1
。io
如何消化 ? 首先是每一個項目的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
好了,這樣就得出計算後的寬度了。
和width
同樣,他的默認值爲auto
,把上面幾個例子換成width
也是同樣的。固然工做中最好用flex-basis
,更符合規範。
若是父級的空間足夠:flex-grow
有效,flex-shrink
無效。
若是父級的空間不夠:flex-shrink
有效,flex-grow
無效。
若是你有疑問歡迎討論,一塊兒學習。