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