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 1 ) (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：内部：100px - 24px = 76px；外部：76px 2*20px = 116px

这演示了如何根据弹性收缩因子和边框大小的考虑来分配收缩。填充被添加回外部宽度，从而导致与内容框场景相比不同的计算尺寸。

以上是Flex-Shrink Factor 如何与 Border-Box 大小调整中的填充相互作用？的详细内容。更多信息请关注PHP中文网其他相关文章！