为什么我的 Flex 项目在使用“box-sizing: border-box”时忽略边距？

Flex 项目在调整盒子大小时忽略边距：border-box

Flexbox 在调整边距和盒子大小时可能会很棘手。默认情况下，边距不包含在 Flex 项目大小的计算中，即使使用 box-sizing: border-box 也是如此。

理解盒子模型

The盒模型是一个 CSS 概念，定义元素的尺寸和布局。它由四个部分组成：

• 内容框：元素实际内容的大小。
• 填充：边框内的透明空间。
• 边框：元素周围的可见线。
• Margin：边框外的透明空间。

box-sizing

box-sizing 属性决定如何将内边距和边框计算为元素的整体大小。它有两个可能的值：

• content-box（默认）：填充和边框添加到内容框中。
• border-box：填充和边框包含在元素的内容框中

Flexbox 属性

在 Flexbox 中，以下属性与 Flex 项目的布局相关：

• flex-增长：指定当有可用空间时项目应占用的额外空间量。
• flex-shrink：指定项目应收缩以适合容器的量。
• flex-basis：在应用 flex-grow 或 flex-shrink 之前定义项目的理想大小。

解决方案

确保 Flex 项目尊重边距，同时box-sizing: 使用 border-box，请考虑以下事项：

• 在 Flex 项目上指定 flex-shrink: 0 以防止它们收缩。
• 调整 flex-basis 值考虑到内容大小和边距。

例如，在您的代码中：

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}

通过调整 flex-basis，我们确保有足够的空间内容和边距。

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