Flex 项目在调整盒子大小时忽略边距:border-box
Flexbox 在调整边距和盒子大小时可能会很棘手。默认情况下,边距不包含在 Flex 项目大小的计算中,即使使用 box-sizing: border-box 也是如此。
理解盒子模型
The盒模型是一个 CSS 概念,定义元素的尺寸和布局。它由四个部分组成:
box-sizing
box-sizing 属性决定如何将内边距和边框计算为元素的整体大小。它有两个可能的值:
Flexbox 属性
在 Flexbox 中,以下属性与 Flex 项目的布局相关:
解决方案
确保 Flex 项目尊重边距,同时box-sizing: 使用 border-box,请考虑以下事项:
例如,在您的代码中:
header>span { flex: 1 0 26%; /* Adjusted from 1 1 33.33% */ margin: 10px; }
通过调整 flex-basis,我们确保有足够的空间内容和边距。
以上是为什么我的 Flex 项目在使用'box-sizing: border-box”时忽略边距?的详细内容。更多信息请关注PHP中文网其他相关文章!