Css flex-shrink是怎麼縮的?
當內部元素的寬度超過容器寬度時我們可以使用flex-shrink將內部元素的寬度縮減讓元素不會超過容器
那flex-shrink到底是怎麼做寬度的縮減?
基礎公式如下
元素縮減的寬度 = 超出的總寬度 * 該元素的flex-shrink / 各元素flex-shrink總和
來看一下code的部分
Javascript的部分單純只是獲取元素寬度並放在元素上,可以不看
HTML、CSS原始碼的部分
1.元素外部容器的寬度為600px
2.內部元素每個為300px
3.flex-shrink為1、2、1
由於內部元素的總寬度超過容器300px,每個設有flex-shrink的元素寬度都會做縮減,用公式算一下每個元素縮減的多少
元素1
75px = 超出的寬度 300px * 各別flex-shrink 1 / flex-shrink總和 4
元素2
150px = 超出的寬度 300px * 各別flex-shrink 2/ flex-shrink總和 4
元素3
75px = 超出的寬度 300px * 各別flex-shrink 1 / flex-shrink總和 4
元素寬度為225px、150px、225px,看起來公式沒什麼問題
如果元素寬度不相同的情況下呢?
我們先將內部元素寬度設為300px、250px、150px而flex-shrink跟原本一樣為1、2、1
我們來用公式計算一下
元素1
25px = 超出的寬度 100px * 各別flex-shrink 1 / flex-shrink總和 4
元素2
50px = 超出的寬度 100px * 各別flex-shrink 2/ flex-shrink總和 4
元素3
25px = 超出的寬度 100px * 各別flex-shrink 1 / flex-shrink總和 4
計算出來的寬度為275px、200px、125px
那我們現在實際來看一下程式碼
實際計算出來的寬為269px、197px、134px,跟用公式算出來的不一樣
其實我們在網路上看到很多講flex-shrink公式是被簡化過的,只有當元素的寬度都一樣才可以這樣用,實際的公式需要將元素寬度考量進去
首先先將元素的寬度乘以flex-shrink相加來計算總權重
總權重 950 = 300px * 1 + 250px * 2 + 150px * 1
修正的公式如下:
元素縮減的寬度 = 超出的總寬度 * 各別flex-shrink * 各別元素的寬度 / 總權重
現在來重新計算縮減的寬度
元素1
31.57px = 100px * 1 * 300px / 950
元素2
52.63px = 100px * 2 * 250px / 950
元素3
15.78px = 100px * 1 * 150px / 950
計算出來的寬度為268.43px、197.39px、134.22px
實際來看一下程式碼
發現計算出來的寬度有小數點的誤差,不過這點可以忽略不計
補充章節
如果flex-shrink小於1的狀況?
如果flex-shrink總和小於1則在收縮寬度時不會收縮超出的總寬度,而是會收縮flex-shrink相對於1的比例
拿上面的例子做修改
將flex-shrink設為0.1、0.2、0.3
收縮的總寬度為超出的總寬度100px * 0.6 / 1 = 60px,帶入原先的公式
元素縮減的寬度 = 超出的總寬度 * 各別flex-shrink * 各別元素的寬度 / 總權重
計算新的總權重
125px = 300px * 0.1 + 250px * 0.2 + 150px * 0.3
元素1
14.4px = 60px * 0.1 * 300px / 125
元素2
24px = 60px * 0.2 * 250px / 125
元素3
21.6px = 60px * 0.3 * 150px / 125
計算出來的寬度為 285.6px、226px、128.4px
跟實際的結果會有有零點幾的誤差
這篇與其說是文章倒不如說是寫筆記會比較正確
複習flex時剛好有這個疑問就爬文+問人
希望能幫助一樣有這個疑問的人