flexbox flex-base列分布[重复]

Question

这个问题在这里已有答案：

• Flex-Basis for Wrapping Columns 2回答

我有一个Flexbox容器，最多有6个子元素，宽度为16.666667％，减去10px的阴沟。我可以用六个项目创建网格，并且它们在flex-row中均匀分布，但我遇到的问题是当我只有5个项目时，当我将两个网格比较时，子元素不均匀分布。因此，当我只有五个元素时，每个元素增加5px左右，因为它们不是第6项，我该如何解决这个问题，以便两个网格都排成一行。我不希望发生的是为5列而不是6列重新分配空格

.flex-grid {
  background: green;
}

.flex-grid .flex-row {
  display: flex;
}

.flex-grid .flex-1-6-5 {
  flex: calc( 16.6666666667% - 10px);
  /* I've tried flex: 0 0 calc() */
}

.flex-grid.flex-gutter-5>.flex-row>div:not(:last-of-type) {
  margin-right: 10px;
}

.box {
  background: red;
}

<div class="flex-grid flex-gutter-5 six-columns">
  <div class="flex-row">
    <div class="flex-1-6-5 box">1</div>
    <div class="flex-1-6-5 box">2</div>
    <div class="flex-1-6-5 box">3</div>
    <div class="flex-1-6-5 box">4</div>
    <div class="flex-1-6-5 box">5</div>
    <div class="flex-1-6-5 box">6</div>
  </div>
</div>
<div class="flex-grid flex-gutter-5 five-columns" style="margin-top: 40px">
  <div class="flex-row">
    <div class="flex-1-6-5 box">1</div>
    <div class="flex-1-6-5 box">2</div>
    <div class="flex-1-6-5 box">3</div>
    <div class="flex-1-6-5 box">4</div>
    <div class="flex-1-6-5 box">5</div>
  </div>
</div>

Answer 1

听起来像max-width的calc(16.6666666667% - 10px)可能会成功。

.flex-grid {
  background: green;
}

.flex-grid .flex-row {
  display: flex;
}

.flex-grid .flex-1-6-5 {
  flex: 1;
  max-width: calc( 16.6666666667% - 10px);
}

.flex-grid.flex-gutter-5>.flex-row>div:not(:last-of-type) {
  margin-right: 10px;
}

.box {
  background: red;
}

<div class="flex-grid flex-gutter-5 six-columns">
  <div class="flex-row">
    <div class="flex-1-6-5 box">1</div>
    <div class="flex-1-6-5 box">2</div>
    <div class="flex-1-6-5 box">3</div>
    <div class="flex-1-6-5 box">4</div>
    <div class="flex-1-6-5 box">5</div>
    <div class="flex-1-6-5 box">6</div>
  </div>
</div>
<div class="flex-grid flex-gutter-5 five-columns" style="margin-top: 40px">
  <div class="flex-row">
    <div class="flex-1-6-5 box">1</div>
    <div class="flex-1-6-5 box">2</div>
    <div class="flex-1-6-5 box">3</div>
    <div class="flex-1-6-5 box">4</div>
    <div class="flex-1-6-5 box">5</div>
  </div>
</div>