为什么 Flex 项目忽略边距和框大小：边框问题？

Flex 项目不考虑边距和 Box-Sizing：border-box

在 CSS 中，box-sizing 属性决定如何计算元素的宽度和高度，包括任何填充或边框。当设置为 border-box 时，元素的尺寸包括内边距和边框。然而，无论 box-sizing 属性如何，边距总是单独计算。

使用 Flexbox 时，将 flex 设置为 1 1 33.33% 且 margin: 10px 会产生意外行为。尽管 Flexbox 通常会在项目之间平均分配可用空间，但在这种情况下不会考虑边距。结果，没有达到预期的每行三个项目。

要解决此问题，可以调整 flex-basis 属性。在提供的示例中，flex-basis 设置为 26%，这是每个项目的所需宽度减去边距。通过确保边距不考虑到 flex-basis 中，Flexbox 可以正确对齐项目并按预期包装它们。

<code class="css">.horizontal-layout {
  display: flex;
  width: 400px;
}

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

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

以上是为什么 Flex 项目忽略边距和框大小：边框问题？的详细内容。更多信息请关注PHP中文网其他相关文章！