为什么 Flex Wrap 不能与 Box-Sizing：Border-Box 和 Margins 一起使用？

了解 Flexbox 项目边距和盒子大小

背景：

Flexbox 是一个强大的布局模块，提供对元素的大小和分布。另一方面，box-sizing 属性决定了填充和边框如何影响元素的尺寸。

在您的场景中，您期望 Flex 项目缩小以适合三列，即使使用 box-sizing： border-盒子。但是，您遇到了弹性包装无法按预期工作的问题。

说明：

重要的是要注意 box-sizing: border-box 包括宽度/高度计算中包含内边距和边框，但不包含边距。边距始终单独计算。

默认 Flex 容器设置：

Flex 容器的初始设置是 flex-shrink：1。这意味着 Flex 项目可以收缩到适合容器，可能会覆盖指定的宽度、高度或 flex-basis 值。

解决方案：

要实现所需的布局，您可以调整 flex- basic 属性设置为一个值，该值既能容纳边距，又能强制换行。这将允许 flex-grow 均匀分配剩余空间，而不会侵入边距空间。

调整后的 CSS：

<code class="css">* {
  box-sizing: border-box;
}

.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>

结论：

通过了解 Flexbox 项目边距和框大小之间的相互作用，您可以有效地控制布局中的元素大小和位置。

以上是为什么 Flex Wrap 不能与 Box-Sizing：Border-Box 和 Margins 一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！