CSS 解决 Flex 布局中 justify-content: space-between； 导致最后一排项目分散对齐的问题

当使用 justify-content: space-between; 时，如果容器中的项目不能完全填满一行，最后一排的项目会分散对齐（即第一个项目靠左，最后一个项目靠右）。如果你希望最后一排的项目 从左到右紧凑排列，可以通过以下方法解决：

方法 1：使用 flex-grow 和 margin 模拟紧凑排列

通过给子项目设置 flex-grow 和 margin，可以让最后一排的项目紧凑排列。

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

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex-grow: 1; /* 让子项目可以扩展 */
  margin: 5px; /* 设置间距 */
  width: 100px; /* 固定宽度 */
  height: 100px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果

• 当一行无法完全填满时，最后一排的项目会从左到右紧凑排列。
• 通过 flex-grow: 1 和 margin 控制间距。

方法 2：使用伪元素填充空白

通过添加伪元素填充空白，可以避免最后一排项目分散对齐。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container::after {
  content: '';
  flex: auto; /* 填充剩余空间 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果

• 伪元素会填充最后一排的空白，使最后一排的项目紧凑排列。

方法 3：使用 grid 布局

如果项目数量固定或可以计算，可以使用 grid 布局代替 flex 布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px); /* 自动填充列 */
  gap: 10px; /* 设置间距 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果

• grid 布局会自动处理最后一排的排列问题，项目会紧凑排列。

方法 4：动态计算间距（适用于固定列数）

如果列数是固定的，可以通过动态计算间距来实现紧凑排列。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 设置间距 */
}

.item {
  width: calc((100% - 20px) / 3); /* 3列布局 */
  height: 100px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果

• 通过 calc 动态计算宽度，确保项目紧凑排列。

总结

• flex-grow + margin：适合动态项目数量，简单易用。
• 伪元素填充：适合需要兼容 space-between 的场景。
• grid 布局：适合固定列数或动态列数的场景，推荐使用。
• 动态计算间距：适合固定列数的场景。

根据具体需求选择合适的方法即可！