为什么我的 Flex 项目在使用 `box-sizing: border-box` 时不考虑边距？

Flex 项目不考虑边距和盒子大小：border-box

了解盒子大小的概念以及它如何影响 Flex 项目的行为至关重要：使用 CSS Flexbox。默认情况下，box-sizing 属性设置为“content-box”，这意味着将填充和边框添加到内容宽度和高度。但是，当 box-sizing 设置为“border-box”时，边距不会计入宽度或高度计算中。

在这种情况下，Flex 项目会遇到边距和 box-sizing 设置为“的问题” “border-box”，原因在于计算项目宽度时忽略边距。 Flex 容器的初始设置是 flex-shrink: 1，这意味着 Flex 项目可以减小其大小以适合容器。但是，除非禁用了 flex-shrink，否则这本身不足以确保遵守指定的宽度、高度或 flex-basis。

解决方案

解决该问题并确保弹性项目在使用 box-sizing: border-box 时尊重边距，请考虑以下调整：

替换：

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

替换为：

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

通过将 flex-basis 从 33.33% 减少到 26%，它变得足够小，足以强制换行，同时仍允许考虑边距。此调整可确保 Flex 项目不会侵入边距空间并遵守指定的宽度和边距。

以上是为什么我的 Flex 项目在使用 `box-sizing: border-box` 时不考虑边距？的详细内容。更多信息请关注PHP中文网其他相关文章！