我可以将包裹的flexbox列设置为相等的宽度并拉伸它们的宽度吗？

Question

我正在制作响应式图库，并希望避免使用媒体查询，而可以使用flexbox完成。我将flex-grow设置为1，因此列填充可用空间并添加最小/最大宽度，因此它们保持不错的大小。问题是 - 当列开始换行时我有：

• 第一行有3个常规列。
• 第二行有2个较大的列。

我希望第二行列的宽度与第一行的宽度相同。

jsfiddle demo：https://jsfiddle.net/xu92m43e/1/

当前结果：

预期结果

HTML：

<div class="gallery">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS：

.gallery {
  display: flex;
  flex-wrap: wrap;
  border: solid 5px black;
  > * {
    flex-grow: 1;
    background: purple;
    min-width: 175px;
    max-width: 300px;
    margin: 5px;
    &:after {
      display: block;
      content: '';
      padding-bottom: 75%;
    }
  }
}

没有flexbox的解决方案也可能很好，只要它可以包裹列。