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

前言

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

flex-grow

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

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.33333333333331。

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

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

flex-shrink

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

flex-shrink

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

如何消化 ？ 首先是每一個項目的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/...