Flexbox 的「flex-shrink」因素如何考慮填充和「盒子大小」？

有Padding 和Border-box 的Flex-shrink

Flexbox 的收縮因子公式考慮padding 和box-sizing，如下所示：

第 1步：計算內部柔性基礎Size

根據 box-sizing 屬性決定內容框（innerFlexBasis）的大小。

• 如果 box-sizing: content-box, innerFlexBasis = 指定的彈性基礎。
• 如果 box-sizing: border-box，innerFlexBasis = 指定的 Flex 基礎 - (padding-left padding-right)。

第2 步：計算縮放的Flex 收縮係數

將每個未凍結的內部彎曲基礎乘以彎曲收縮係數item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

第 3 步：決定縮放伸縮係數的比率

將所有未凍結的縮放伸縮係數相加項目：sumScaledFlexShrinkFactors = Σ (scaledFlexShrinkFactor)

求每個縮放後的伸縮因子與總和的比值：ratio =scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

第4 步：計算項目內部寬度

第4 步：計算項目內部寬度按比例修改每個item的內部寬度並保持空閒space:

innerWidth = insideFlexBasis 比率* 剩餘自由空間

第5 步：調整外部寬度

對於box-sizing：border-box，添加padding內部寬度來計算外部寬度（透過 getCompulatedStyle 計算）。

以上是Flexbox 的「flex-shrink」因素如何考慮填充和「盒子大小」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！