当前位置：首页 > article >正文

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

article 2025/2/22 16:16:56

当使用 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;
}