如何利用 justify-content: space-between 的自动间距，元素数量不均匀？ [复制]

Question

我有一个定义良好的网格系统：

.col-3-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.col-3-grid .grid-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 32%;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    max-width: 33.333333%;
}

一行有3个元素时看起来不错：

Elements look good when they're 3.

但是，当第一行不是第 2 行或任何其他行的倍数或 3 的项目数量奇数时，就会发生这种情况：

Elements look bad when they're 5, 8 or so.

在第 4 项和第 6 项之间，有一个间隙。这是意料之中的，但这种方法非常优雅，我真的不想为justify-content: flex-start 放弃它，因为那样我就需要为我的每个元素添加填充，而且它们永远不会与其他元素对齐。

简而言之，我想保留space-between，但让项目在每一行都排成一行。

Answer 1

我认为使用justify-content:space-between 是不可能的。但是，您可以对每个中间元素使用边距，即第 2、第 5、第 8、第 11 等等...

.col-3-grid .grid-item:nth-child(3n+2) {
  margin: 0 2%;
}

无需使用justify-content:space-between

.col-3-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.col-3-grid .grid-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 32%;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  max-width: 33.333333%;
  height: 30px;
  background: gray;
  margin-bottom: 10px;
}

.col-3-grid .grid-item:nth-child(3n+2) {
  margin: 0 2%;
}

<div class="col-3-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>