如何使用flex-wrap实现元素左右对齐且保持固定间距

我有一个背景色为aqua的容器，内部包含6个div元素。我使用flex-wrap属性在元素超出当前屏幕宽度时实现换行，但希望每行的第一个div左对齐容器左侧，该行最后一个div右对齐容器右侧，即使元素被挤到第二行，容器的空间也能被完全利用，无剩余空白。我不想使用space-between属性，因为希望保持每个div之间的间距固定为32px。

现有代码：

CSS #

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

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

HTML #

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

推荐方案：Grid布局 #

改用Grid布局能完美匹配需求，既保证元素间固定32px间距，又让每行元素自动填满容器宽度，首尾分别对齐容器左右。

修改后的CSS代码：

.container {
  width: 90vw;
  margin: auto;
  background-color: aqua;
  display: grid;
  /* 自动生成列，每列最小300px，剩余空间平分给各列 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* 固定元素间的间距 */
  gap: 32px;
}

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

说明

• grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))：容器会根据宽度自动生成尽可能多的列，每列最小宽度300px；当容器有剩余空间时，会把空间平分给所有列，确保每行完全填满容器，无空白残留。
• gap:32px：直接设置元素间的固定间距，不会像flex的space-between那样在元素数量较少时拉大间距。
• 无需给div设置固定宽度，Grid会自动按规则调整元素宽度，同时满足最小300px的要求。

备选方案：Flex布局（有局限） #

如果一定要用Flex实现，可以通过添加伪元素占据剩余空间，但这个方案存在局限：当最后一行元素刚好填满容器时，伪元素会被挤到下一行，导致容器底部多出空白。

修改后的CSS代码：

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

.container div {
  background-color: blue;
  height: 200px;
  width: 300px;
  /* 禁止元素收缩 */
  flex-shrink: 0;
}

/* 伪元素占据最后一行剩余空间，迫使最后一个元素右对齐 */
.container::after {
  content: "";
  flex: auto;
  min-width: 300px;
}

内容的提问来源于stack exchange，提问作者Tibo Mertens