使用CSS Flexbox的`justify-content:space-between`，但左对齐最后一行

Question

我有一个简单的盒子网格，希望使用Flexbox来实现响应式布局。

盒子的数量由用户生成，因此我需要动态工作的东西。这里是我的CodePen示例：

<div class="wrap">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

CSS：

.wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.thumb{
  width:150px;
  height:150px;
  background-color:black;
  margin-bottom:20px;
}

这是使用上述代码的效果：

这是我想要的样子：

如何使用flexbox实现这一点？如果可能的话，我想避免使用%边距，并让flexbox完成所有工作，因为它在响应式设置中非常好用。

- JVG

---

不可能...以前出现过这种情况，而且顶部行无法对齐。 - Paulie_D

你是指最下面一行 @Paulie_D 吗？这很令人失望，我已经在谷歌上搜索了一番，但没有找到任何讨论。有任何提议的解决方法吗？ - JVG

不，你可以获取最后一行来实现这个功能，但是不能保持与顶部行的对齐方式。 - Paulie_D

Answer 1

好的，您可以这样做，但会破坏一点DOM结构。 插入填充元素（数量为一行最多容纳的元素数量），并将其高度设为0，问题就解决了。

.wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.thumb{
  width:150px;
  height:150px;
  background-color:black;
  margin-bottom:20px;
}


.filler{
  width:150px;
  height:0px;
  margin: 0px;
}

<div class="wrap">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

- vals