填滿如何影響「border-box」與「content-box」中的 Flex-Shrink 行為？

Padding 和Border-Box 中的Flex-shrink 因子

flex-shrink 因子用於確定元素在以下情況下收縮的程度：彈性容器中有負空間。將 padding 套用至元素時，內部 Flex 基礎會受到影響，取決於 box-sizing 的值。

• Content-box: 內部 Flex 基礎僅包含內容，因此 padding 不會影響收縮的可用空間。
• Border-box: 內部 Flex 基礎包括兩者內容和填充，因此填充會減少收縮的可用空間。

要計算每個項目的縮放伸縮係數，請將其內部伸縮基礎乘以其伸縮收縮係數。然後，找出每個項目的縮放伸縮係數與所有縮放伸縮係數總和的比率。最後，將專案的目標大小設定為其彈性基礎減去與比例成比例的負空間的一小部分。

沒有填充，計算很簡單：

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

有填充，可用空間減少，因此剩餘可用空間發生變化。

對於 border-box，指定的 flex 基數為外基數（包括填充）。內部基數是透過減去填充寬度來計算的。縮放後的彈性收縮係數總和保持不變，但比例和目標大小進行了調整：

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

範例：

考慮一個包含三個項目的彈性容器，每個彈性收縮因子為2：

• 第1 項：Flex 基礎 = 300px，內邊距= 0px
• 項目2：Flex 基礎= 200px，內邊距= 0px
• 項目3：Flex 基礎= 100px，內邊距= 0px

場景1（無填充）：

剩餘可用空間= -200px

• 縮放的彎曲收縮係數：600、200、200
• 縮放的彎曲收縮係數總和= 1000
• 比率：0.6， 0.2、0.2
• 內部寬度：180px、160px、60px

場景2（填充= 10px）：

自由空間= -260px

縮放的彎曲收縮係數：560、200、160
• 縮放的彎曲收縮係數總和= 920
• 比率：0.61、0.22、0.17
內部寬度：144px， 148px、48px
• 場景3（邊框框）：

剩餘可用空間= -200px

• 剩餘可用空間= -200px
• 縮放數：636、240、 176
• 縮放伸縮係數總和 = 1052
• 比率：0.6、0.23、0.17
• 內部寬度：176px、160px、64px
內部寬度：176px、160px、64px

以上是填滿如何影響「border-box」與「content-box」中的 Flex-Shrink 行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！