即使使用 box-sizing 边框框也可以包裹 Flex 项目

Question

在下面的代码中，当我添加填充时，它应该添加到宽度，因为我使用的是border-box。但它不工作，为什么？谁能帮帮我。

如果我添加一些边距或填充，我的 child__wrapper 会被推入新行，为什么？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}

.child__wrapper {
  height: 300px;
  flex: 0 0 33.3%;
  margin: 10px;
  box-sizing: border-box;
  background: rebeccapurple;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>

Answer 1

请记住，box-sizing: border-box 将填充和边框带入宽度/高度计算，而不是边距。保证金总是单独计算的。

box-sizing 属性有两个值：

• content-box
• border-box

它不提供padding-box 或margin-box。

在提及CSS Box Model 时考虑这些术语。

^来源：W3C

因此，当您将项目宽度设置为 33.3% 并在左右添加 10px 边距时，会触发溢出条件，从而导致第三个项目的换行。

33.3% + 33.3% + 33.3% + 10px + 10px + 10px + 10px + 10px + 10px > 100%

相反，在项目上试试这个：

flex: 1 0 26%

这条速记规则分解为：

• flex-grow: 1
• flex-shrink: 0
• flex-basis: 26%

对于flex-grow: 1，flex-basis 不需要为 33.3%。

由于flex-grow 将占用行中的可用空间，flex-basis 只需大到足以强制执行换行即可。

在这种情况下，使用flex-basis: 26%，行上最多可以存在三个项目，留有足够的边距空间，flex-grow 填补所有空白。

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child__wrapper {
  flex: 1 0 26%;
  margin: 10px;
  height: 300px;
  box-sizing: border-box;
  background: rebeccapurple;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<div class="wrapper">
  <div class="child__wrapper">1</div>
  <div class="child__wrapper">2</div>
  <div class="child__wrapper">3</div>
  <div class="child__wrapper">4</div>
  <div class="child__wrapper">5</div>
  <div class="child__wrapper">6</div>
  <div class="child__wrapper">7</div>
  <div class="child__wrapper">8</div>
  <div class="child__wrapper">9</div>
</div>