填充如何影响'border-box”与'content-box”中的 Flex-Shrink 行为？

Padding 和 Border-Box 中的 Flex-shrink 因子

flex-shrink 因子用于确定元素在以下情况下收缩的程度：弹性容器中有负空间。将 padding 应用于元素时，内部 Flex 基础会受到影响，具体取决于 box-sizing 的值。

• Content-box: 内部 Flex 基础仅包括内容，因此 padding 不会影响收缩的可用空间。
• Border-box: 内部 Flex 基础包括两者内容和填充，因此填充会减少收缩的可用空间。

要计算每个项目的缩放伸缩收缩系数，请将其内部伸缩基础乘以其伸缩收缩系数。然后，找到每个项目的缩放伸缩系数与所有缩放伸缩系数之和的比率。最后，将项目的目标大小设置为其弹性基础减去与比例成比例的负空间的一小部分。

没有填充，计算很简单：

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

有填充，可用空间减少，因此剩余可用空间发生变化。

对于 border-box，指定的 flex 基数为外基数（包括填充）。内部基数是通过减去填充宽度来计算的。缩放后的弹性收缩系数之和保持不变，但比例和目标大小进行了调整：

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

示例：

考虑一个包含三个项目的弹性容器，每个弹性收缩因子为 2：

• 第 1 项：Flex 基础 = 300px，内边距 = 0px
• 项目 2：Flex 基础 = 200px，内边距 = 0px
• 项目 3：Flex 基础 = 100px，内边距 = 0px

场景1（无填充）：

• 剩余可用空间 = -200px
• 缩放的弯曲收缩系数：600、200、200
• 缩放的弯曲收缩系数总和 = 1000
• 比率：0.6， 0.2、0.2
• 内部宽度：180px、160px、60px

场景 2（填充 = 10px）：

• 剩余自由空间= -260px
• 缩放的弯曲收缩系数：560、200、160
• 缩放的弯曲收缩系数之和 = 920
• 比率：0.61、0.22、0.17
• 内部宽度：144px， 148px、48px

场景 3（边框框）：

• 剩余可用空间 = -200px
• 缩放伸缩收缩因数：636、240、 176
• 缩放伸缩系数之和 = 1052
• 比率：0.6、0.23、0.17
• 内部宽度：176px、160px、64px

以上是填充如何影响'border-box”与'content-box”中的 Flex-Shrink 行为？的详细内容。更多信息请关注PHP中文网其他相关文章！