彈性盒子模型屬性之flex-shrink

上一次,咱們已經瞭解過flex-grow的具體用法後,這周,讓咱們一塊兒來見一下flex-basis這個屬性. flex-shrink

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

下面的例子中沒有定義該屬性，可是知足容器中空間不足的狀況,項目會默認縮小。

當項目1,2,3,4,5的flex-grow比例改變爲:

計算過程以下(在此咱們忽略邊框的大小,以便於計算):
整個box的寬度400px項目的寬度之和爲100+100+100+100+100=500px,超出的空間就爲500-400px=100px,那麼例子中項目1不縮小,項目2的縮小比例爲1 ,項目3的縮小比例爲2,項目4的縮小比例爲3,項目5不縮小。那這樣超出的 100px 就要被2, 3, 4 消化掉，比例是1：2：3。那麼咱們如何計算呢？

首先是每一個項目的wdith值乘以flex-shrink值求積，
2：(100 * 1) = 100
3：(100 * 2) = 200
4：(100 * 3) = 300
而後再求和全部項目的乘積。
(100 + 200 + 300) =600
獲得求佔比以後還要乘以要超出的空間。
A：(100 / 600) * 100 = 16.66
B：(200 / 600) * 100 = 33.33
C：(300 / 600) * 100 = 50
獲得每一項要減去縮小空間後的剩餘空間
A：(100 – 16.66) = 83.34
B：(100 – 33.33) = 66.67
C：(100 - 50) = 50
好了，這樣就得出計算後的寬度了。

那麼flex-shrink這個屬性在咱們使用彈性佈局的時候也是很是常見的,並且大部分同窗都須要明確具體是怎樣計算出縮小後的值..

怎麼樣,如今你們對於flex-shrink是如何計算的問題是否是就很清晰了呢^-^.

（上海尚學堂前端培訓原創,請多關注html5+CSS相關技術乾貨稍後奉上）