Flex-grow

( CODEPEN 範例連結 )

  • 子元素的伸展比例分配 ,在父元素充足時會有影響。
  • 預設 0 ( 不會將剩餘空間分配給子元素 ) ,設定為 1 長度會依比例進行彈性變化 。( 子元素不同寬度如何計算比例分配,請看此篇 & CODEPEN 範例連結 )

Flex-shrink

  • 子元素的壓縮比例分配 , 在父完素不足時會有影響 。
  • 預設 1 ( 會被壓縮 ),設定 0 ( 不會被壓縮 ) 。 ( CODEPEN 範例連結 )
  • 如何計算被壓縮的元素們比例分配,請看下方 ▼

Flex-basis

  • 子元素的基本大小。
  • 預設 0。

Q1. 如何計算 flex-shrink 壓縮元素的比例各為多少 ?

( 問題出處連結 )

註 : 因發問者 codepen 內子元素寬度皆設相同,所以這邊另外用他的範例更改寬度做運算拆解

.

當內部元素寬度不同,就需要加入總權重與扣除值做運算囉,下面用您的範例另外寫個 codepen 做拆解 ( 可搭配開發者工具檢視寬度 ) :

.

step 1 : 先列出附元素與子元素寬度,並算出子元素超出父元素多少值

父元素寬度為 600px

子元素 ABC 的 basis ( 與 收縮比 flex-shrink ) 分別為 300px ( shrink : 1 )、 400px ( shrink : 2 )、 250px( shrink : 1 )

超出值 : 600 – ( 300+400+250 ) = -350px

step 2 : 算出子元素的總權重

總權重 = 所有子元素寬度 收縮比 (flex-shrink) → 3001 + 4002 + 2501 = 1,350

step 3 : 算出每個子元素的扣除值後,再以原寬度減掉扣除值即最終寬度

扣除值 = (子元素寬度 收縮比(flex-shrink) 超出值 ) / 總權重

A 扣除值為 ( 3001350 ) /1350 = 77.78 。 A 最終寬度為 300-77.78 = 222.22

B 扣除值為 ( 4002350 ) / 1350=207.4。B 最終寬度為 400-207.4 = 192.6

C 扣除值為 ( 2501350 ) / 1350 = 64.81 。 C 最終寬度為 250-64.81=185.19

關於 flex-shrink 應用也附上相關文章給您參考 :

  1. Flex 空間分配 flex-grow / flex-shrink / flex-basis
  2. 详解 flex-grow 与 flex-shrink

資料來源

最後修改日期: 29 10 月, 2020

作者