首页  >  文章  >  web前端  >  为什么我的 Flex 项目在使用 `box-sizing: border-box` 时不考虑边距?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-31 12:33:31613浏览

Why Aren't My Flex Items Respecting Margins When Using `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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn