我正在制作响应式图库，并希望避免使用媒体查询，而可以使用flexbox完成 . 我将flex-grow设置为1，因此列填充可用空间并添加最小/最大宽度，因此它们保持不错的大小 . 问题是 - 当列开始换行时我有：
第一行
-
3个常规列 .
-
第二行有2个较大的列 .
我希望第二行列的宽度与第一行的宽度相同 .
jsfiddle demo：https://jsfiddle.net/xu92m43e/1/
Current result:
Expected result
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的解决方案也可能是好的，只要它可以包裹列 .