如何使用 CSS 和 Flexbox 调整剩余项目的大小

如何解决如何使用 CSS 和 Flexbox 调整剩余项目的大小

看看这个布局：

我正在使用 FlexBox。所有项目都在同一个 FlexBox 中。但是最后三件变得更大了，因为只有 3 件，而且超过了 4 件。我想将最后三件的尺码设置为其他四件外套的尺码。

我尝试将 flex-grow 设置为零，但通过这种方式，它们始终保持相同的大小。

谢谢。

代码如下：

.products {
     display: flex;
     flex-wrap: wrap;
}

@media (max-width: 920px) {
   .product-card {
   flex: 1 21%;
}
}

<div class="product-card">
      <div class="product-image">
        <img src="assets/img/coat-01.jpeg">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

感谢您的帮助。