即使使用盒子大小的 border-box 也可以弯曲项目

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 盒模型时请考虑这些术语。

^来源：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填充任何空白。

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

flex: 1 0 26%