html - 如何使用 flex-grow 像尺寸一样缩放边距？

Question

我正在制作一张里面有正方形的卡片，当我使用 flex-grow 时，我需要正方形的边距像尺寸一样缩放。

我需要将正方形放在 div 中，但是当我更改正方形的数量时，它们都需要适合。

我可以使用 flex-grow 缩放正方形的大小，但我也需要控制它们的边距。因为有 8 个和 10 个方格时的边距不同，它们适合。

html：

<div id="card">
      <div id="descriptionZone">
      </div>
      <div id="squaresZone">
        <div id="squares" *ngFor="let number of orders; let i= index">

        </div>
      </div>
      <div id="brandZone">
      </div>
    </div>

CSS：

#squaresZone{
  width: 100%;
  height: 50%;
  border: #1e2023 solid 2px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#squares{
  //height: 100px;
  //width: 100px;
  background-color: black;
  flex-grow: 1;
  border: solid wheat 1px;
  margin: auto;
  max-width: 100px;
  max-height: 100px;
  min-width: 69px;
  min-height: 69px;
  margin-left: 25px;
  ma

rgin-right：25px；边距顶部：10px }

我正在尝试和尝试，但似乎无法找到一种解决方案来扩展我需要的边距。

例如，当有 8 个正方形时，我需要左边距和右边距为 15px，当有 10 个时，我需要它为 25px

有什么办法可以扩大保证金？

标签： htmlcssflexbox