Flexbox 的'flex-shrink”因素如何考虑填充和'盒子大小”？

带有 Padding 和 Border-box 的 Flex-shrink

Flexbox 的收缩因子公式考虑 padding 和 box-sizing，如下所示：

第 1 步：计算内部柔性基础Size

根据 box-sizing 属性确定内容框（innerFlexBasis）的大小。

• 如果 box-sizing: content-box, innerFlexBasis = 指定的弹性基础。
• 如果 box-sizing: border-box，innerFlexBasis = 指定的 Flex 基础 - (padding-left padding-right)。

第 2 步：计算缩放的 Flex 收缩系数

将每个未冻结的内部弯曲基础乘以弯曲收缩系数item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

第 3 步：确定缩放伸缩系数的比率

将所有未冻结的缩放伸缩系数相加项目：sumScaledFlexShrinkFactors = Σ (scaledFlexShrinkFactor)

求每个缩放后的伸缩因子与总和的比率：ratio =scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

第 4 步：计算项目内部宽度

按比例修改每个item的内部宽度并保持空闲space:

innerWidth = insideFlexBasis 比率 * 剩余自由空间

第 5 步：调整外部宽度

对于 box-sizing：border-box，添加 padding内部宽度来计算外部宽度（通过 getCompulatedStyle 计算）。

以上是Flexbox 的'flex-shrink”因素如何考虑填充和'盒子大小”？的详细内容。更多信息请关注PHP中文网其他相关文章！