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

flex-grow

定義項(xiàng)目的放大比例，默認(rèn)值為0，就算存在剩余空間，也不會(huì)放大。單單幾句話肯定不能表達(dá)出意思，來(lái)看個(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ì)算出來(lái)的值就是B :36.666666666666664, C：73.33333333333333。這個(gè)時(shí)候剩余空間就被計(jì)算出來(lái)了，相加后的結(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無(wú)效。

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

注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

轉(zhuǎn)載于:https://www.cnblogs.com/dehuachenyunfei/p/6527601.html

總結(jié)

以上是生活随笔為你收集整理的Flex中宽度计算的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。