關於CSS flex-shrink這件事


廢話:

其實本身是個大學畢業之後才開始好好的努力寫code,又因為對於網頁視覺呈現的美感與 UI/UX 設計有興趣,踏入了F2E這個燒燙燙的坑。鑒於我還在摸索,今天遇到了這個問題就把它紀錄下來,之後如果有時間也會在這裡筆記一些瑣事與研究心得。

筆記:

CSS中的flex是個很有趣的屬性,它提供了更靈活的排版卻也複雜了一些,今天我在刻自己的CV網頁,剛好在處理flex的問題,令我頭痛的是flex-shrink這個屬性,大多數會在這個flex: flex-grow|flex-shrink|flex-basis碰到。爬了一些MUKI大又或是一些國外的文章,它的用意是在於當子元素的總寬度超過父容器的寬度時,會自動地計算並且進行壓縮來符合父容器的寬度,實際案例我們下面會再進行舉例說明。

flex-shrink在許多文獻中提到的都是:

"壓縮比數值,數字越大則壓縮得越多"

這段話並沒有錯,數值越大的確會讓設定的該物件進行較大的壓縮,乍看下是很好理解,可是我依然不理解作用原理。

首先必須要了解flex-shrink中的兩個參數設定:

1. flex-shrink的預設數值是1。
2. 如果將數值設定為0的話,則不會對此物件進行壓縮。

記住以上兩點之後,我們來聊聊所謂的"壓縮",我參考了那些文章之後在實作上意識到幾件事情:

到底它壓縮了多少數值? 公式是怎麼計算的 ?
我必須分配多少的壓縮比數才能符合我想要的切版 ?

這是參考另一篇文章的CODE,來看看:

父容器的寬度設定為500px,三個子元素分別為300px 160px 120px
子元素的總寬度是 300+160+120 = 580,超過父元素了80px,這時候就會依照flex-shrink的數值來對有設定的子元素進行壓縮。
程式碼中只有A1設定數值為2,剩下的A2、A3會使用預設值為1。我們看到demo畫面中,的確是總寬度壓縮到了父容器的設定500px,但是壓縮的數值是如何計算的呢? 看過零零總總的文章之後,整理出的筆記如下:

我想知道的數值有以下兩個:
1. 壓縮量是如何計算出來的?
2. 壓縮過後的寬度會是多少?
以上面的demo為例子,首先要算出總加權數,子元素要乘上flex-shrink的數值後加總:
300 * 2 + 160 * 1 + 120 * 1 = 880
計算出加權總數後,依照你想計算的子元素套用以下公式可以得到壓縮量:
---- 子元素寬度 / 加權總數 * flex-shrink數(壓縮比) * 超出父容器的寬度 ----
以A1為例子的話就是
300 / 880 * 2 * (500-(300+160+120))= -54.54
也就是說在這個DEMO中 A1的寬度被壓縮了 54.54px 
所以壓縮後的寬度就會是 300 - 54.54 = 245.46 px
這就是整個flex-shrink的運作公式。

這時候就會有人想到,如果 flex-shrink: 0; 為什麼不會被壓縮?

如果你把A1的2設定為0的話,無論是在加權總數又或是後者的計算壓縮量裡面,都不會與A1有關係,因為怎麼計算都會是0,也因此會造成只有A2、A3在剩下的空間裡進行壓縮。


總結:

希望我以後不會再被這個參數給蒙蔽了,它真的不是很好理解,需要花一點點時間才能瞭解到它的運作模式。

這可能是很多人遇到flex的時候會卡住的地方,希望能夠幫助到想要理解這個CSS的運作原理的人,如果有任何問題歡迎留言,我會盡可能地回答你 !

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.