Flex中宽度计算
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無效。
注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
轉載于:https://www.cnblogs.com/dehuachenyunfei/p/6527601.html
總結
- 上一篇： pandownload 替代品_Pand
- 下一篇： Google Analytics Adv