使用CSS Flexbox'；s`justify content:space-between`但左对齐最后一行

我有一个简单的盒子网格，我想用Flexbox来响应空间

盒子的数量是由用户生成的，所以我需要一些动态工作的东西。我所处的位置：

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

下面是上面代码的外观：

以下是我希望它看起来的样子：

---

如何使用flexbox实现这一点？我希望避免%的边距，如果可能的话，让flexbox在这里完成所有工作，因为它在响应环境中工作得非常好。

好吧，你可以这样做，但代价是破坏了一点DOM。 插入高度为0的填充元素（最多可容纳一行的最大数量的元素），您就拥有了它

.wrap{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.拇指{
宽度：150px；
高度：150像素；
背景色：黑色；
边缘底部：20px；
}
.填料{
宽度：150px；
高度：0px；
边际：0px；
}

不可能……不可能……它以前出现过，但最上面一行不能像那样对齐。你是说最下面一行@Paulie\u D？这令人失望，我们一直在谷歌上搜索，找不到任何讨论。有什么建议的解决办法吗？没有，你可以让最后一行去做，但也不能让顶行对齐。

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

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