如何实现响应式卡片组内多余卡片在下一行自动居中的布局效果

解决方案 #

你当前布局问题的核心原因是justify-content: space-between的对齐规则：它会将每行的剩余空间全部分配到元素之间，所以最后一行不足元素数量时，元素会向两端对齐，无法居中。你可以按照下面的方案调整代码：

修改后的CSS代码

.skills-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 替换space-between为center，让剩余行的元素自动居中 */
  justify-content: center;
  /* 用gap控制卡片之间的横向、纵向间距，无需手动计算宽度偏移 */
  gap: 20px;
}

.card {
  /* 大屏幕下一行4张：宽度占25%，减去gap分摊的宽度即可 */
  width: calc(25% - 15px);
  background: blue;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 20px 25px;
  transition: all 0.5s ease;
}

/* 中等屏幕适配，可根据你的实际断点调整1199px这个数值 */
@media (max-width: 1199px) {
  .card {
    /* 中等屏幕下一行3张：宽度占33.333% */
    width: calc(33.333% - 15px);
  }
}

/* 小屏幕适配可选，根据你的需求调整参数即可 */
@media (max-width: 767px) {
  .card {
    width: calc(100% - 20px);
  }
}

如果你需要兼容不支持flex gap的老旧浏览器，可以删除gap属性，给.card添加margin: 0 10px 20px 10px，效果完全一致。

你的HTML代码无需做任何修改，仅调整上述CSS即可实现预期效果：大屏幕一行排布4张卡片，剩余1张在下一行居中；中等屏幕一行排布3张卡片，剩余2张在下一行居中。

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