如何使用flex-wrap将元素左右对齐

Question

我有一个水族容器，里面有 6 个 div。当 div 对于当前屏幕来说太大时，我使用 flex-wrap 来包裹它们，但是我希望顶行上的第一个 div 与 aqua 容器的左侧对齐，并且该行上的最后一个 div 对齐右侧，因此即使当 div 被推到第二行时，容器的全部空间都会被占用，并且没有剩余的空白空间。

我不想使用 space- Between 因为我希望每个 div 之间的间隙保持相同（32px）。

我有：

代码：

.container {
  width: 90vw;
  margin: auto;
  background-color: aqua;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.container div {
  background-color: blue;
  height: 200px;
  width: 300px;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Answer 1

一种可能是使用 flex ，它是结合了 flex-grow 、flex-shrink 和 flex-basis 的简写属性。由于不可能保持 div 宽度和间隙恒定并仍然填充容器，因此如果您的 div 宽度不恒定但间隙要填满整个容器，我建议这样做

.container {
  width: 90vw;
  margin: auto;
  background-color: aqua;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.container div {
  flex: 1 0 300px;
  background-color: blue;
  text-align: center;
  height: 200px;
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>