即使使用盒子大小的边框也可以包装Flex项目

Question

在我的下面的代码中，当我添加填充时，它应该添加到宽度，因为我使用border-box。但它不起作用为什么？任何人都可以帮助我。

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

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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填补了任何空白。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;