「box-sizing」如何影響 Flexbox 的填充收縮係數計算？

搭配 Padding 和 Border-Box 的 Flexbox 收縮因子

Flexbox 根據可用空間動態調整容器內物品的大小。 flex-shrink 屬性控制當容器太小而無法容納其所有內容時項目如何收縮。

當將內邊距應用於彈性項目時，外部寬度包括內邊距和內容，而內部寬度僅包含內容本身。 box-sizing 屬性決定了在 Flex 計算中使用哪個寬度。

沒有Padding

計算縮放Flex 收縮因子的公式（內部Flex 基本尺寸乘以Flex收縮因子）保持不變：

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

總負自由空間為-200px，收縮因子和生成的內部寬度為：

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

帶填充

添加填充時，內容的可用空間會減少，導致不同的內部寬度。

無邊框

收縮因子是根據內部柔性底座尺寸，不包括填充。生成的內部寬度為：

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

負自由空間為-260px，收縮因子和內部寬度變為：

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

帶邊框

當應用box-sizing: border-box 時，flex 基本尺寸包括內容和填充。收縮因子是使用外部 Flex 基本尺寸計算的，即指定的 Flex 屬性乘以可用空間。

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

可用空間為 -200px 時，收縮因子與內部寬度為：

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

以上是「box-sizing」如何影響 Flexbox 的填充收縮係數計算？的詳細內容。更多資訊請關注PHP中文網其他相關文章！