'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中文网其他相关文章！