Flex-Shrink Factor 如何與 Border-Box 大小調整中的填充相互作用？

padding 和 border-box 中的 flex-shrink 因子如何？

Flexbox 計算收縮因子，如規範中所述，需要乘以每個收縮因子項目的彈性基礎尺寸，導致縮放的收縮因子。然後使用這些縮放因子來確定應應用於每個項目的負可用空間的比例。

Content-Box 與 Border-Box

當填充時介紹一下，flex 基礎尺寸取決於 box-sizing 的值。對於內容框，填滿會加到外部寬度，保留用作 Flex 基本尺寸的內部尺寸。因此，收縮計算與沒有 padding 的場景相同。

但是，當 box-sizing 設定為 border-box 時，指定的 Flex 基本尺寸將變為外部寬度，包括 padding。內部 Flex 基本尺寸是透過減去邊框和填充寬度來計算的。內部 Flex 基本尺寸的變化會影響縮放收縮係數的計算，並最終影響 Flex 項目的收縮行為。

使用Border-Box 進行收縮計算

考慮padding 和box-sizing 設定為border-box 的情況：

外部Flex基本尺寸： [360 像素、220 像素、120像素]
• 內部 Flex 基本尺寸：[320 像素、200 像素、100 像素]
• 填滿：每邊 20 像素
• 負可用空間： -200px

計算縮放縮小因子：

item1: (320px
• 2) / [(320px 2) (200px (100px 2)] = 0.64項目2：(200px
1) / [(320px
• 2) (200px 1) (100px 2)] = 0.24項目3： (100px 2) / [(320px
2) (200px
• 1) (100px 2)] = 0.12最後，將縮放後的收縮因子應用於負自由空間：

項目1：0.64 *（-200px） = -128px

item2: 0.24 * (-200px) = -48px
• item3: 0.12 * (-200px) = -24px
• 已調整內部和外部尺寸

調整計算的尺寸以考慮外部Flex 基本尺寸：

item1 ：內部：320px - 128px = 192px；外部：192px 2*20px = 232px

item2：內部：200px - 48px = 152px；外在：152px 2*20px = 192px
• item3：內部：10px 2*20px = 116px
• 這示範如何根據彈性收縮因子和邊框大小的考慮來分配收縮。填充被加回外部寬度，從而導致與內容框場景相比不同的計算尺寸。

以上是Flex-Shrink Factor 如何與 Border-Box 大小調整中的填充相互作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！