css - 当 flex-basis 设置为 0 时，Flex 子代不填充父容器

Question

我正在处理一个包含可变数量元素的 4 列网格。网格是响应式的，所以我没有使用像素/em 值，而是结合使用百分比和 calc 来补偿右边距。

为了确保不均匀行的剩余框不会调整大小并填充剩余空间，我将 flex-basis 属性设置为 0。唯一剩下的问题是框本身比填充父项少了几个像素容器(注意元素如何不水平填充整个网格)。我该如何解决这个问题？

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: Helvetica;
}

.container {

}

.flex-container {
  display: flex;
  border: 4px solid #000;
  margin: 0 auto;
  width: 400px;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-child {
  flex: 0 1 calc(25% - 6px);
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin-bottom: 6px;
}

.flex-child:not(:nth-of-type(4n)) {
  margin-right: 6px;
}

<div class="flex-container">
  <div class="flex-child">1</div>
  <div class="flex-child">2</div>
  <div class="flex-child">3</div>
  <div class="flex-child">4</div>
  <div class="flex-child">5</div>
  <div class="flex-child">6</div>
  <div class="flex-child">7</div>
  <div class="flex-child">8</div>
  <div class="flex-child">9</div>
  <div class="flex-child">10</div>
</div>

Answer 1

增加 右边距 以显示 8px。

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: Helvetica;
}

.container {

}

.flex-container {
  display: flex;
  border: 4px solid #000;
  margin: 0 auto;
  width: 400px;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-child {
  flex: 0 1 calc(25% - 6px);
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin-bottom: 6px;
}

.flex-child:not(:nth-of-type(4n)) {
  margin-right: 8px;
}

<div class="flex-container">
  <div class="flex-child">1</div>
  <div class="flex-child">2</div>
  <div class="flex-child">3</div>
  <div class="flex-child">4</div>
  <div class="flex-child">5</div>
  <div class="flex-child">6</div>
  <div class="flex-child">7</div>
  <div class="flex-child">8</div>
  <div class="flex-child">9</div>
  <div class="flex-child">10</div>
  <div class="flex-child">11</div>
  <div class="flex-child">12</div>
  <div class="flex-child">13</div>
  <div class="flex-child">14</div>
</div>