解决Flexbox多行3列布局末行元素错位问题

嘿，这个问题我做电商卡片布局时也碰到过！用justify-content: space-between确实会在最后一行元素数量不足3个时，让剩下的卡片左右分散开，中间空出一大块，特别影响视觉效果。给你两个靠谱的解决办法：

方法一：用gap替代space-between（推荐） #

这是现代Flex布局最简洁的方案，直接用gap属性设置卡片之间的间距，同时把justify-content改成flex-start，这样最后一行的卡片就会靠左依次排列，不会被强行拉开。

修改后的CSS代码示例：

#products {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start; /* 替换原来的space-between */
  gap: 20px; /* 自定义卡片之间的水平/垂直间距，按需调整 */
}

/* 给每个卡片设置固定宽度，保证3列布局 */
.product-card {
  flex: 0 0 calc((100% - 40px)/3); 
  /* 计算逻辑：总宽度减去2个gap（3列有2个间距），再除以3 */
  display: flex;
  flex-direction: column; /* 保证卡片内部元素等高 */
}

这个方案的好处是代码简洁，不用额外的 hack，而且gap现在已经被所有主流浏览器支持了。

方法二：用伪元素填充空位（兼容老浏览器） #

如果需要兼容一些不支持gap的旧浏览器，可以给容器添加一个伪元素，让它占据第三列的位置，这样space-between就会把最后两个卡片正常排列在第一、第二列，伪元素不会显示出来。

CSS代码示例：

#products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: stretch;
}

/* 给容器添加伪元素，填充最后一个空位 */
#products::after {
  content: "";
  flex: 0 0 calc((100% - 40px)/3); /* 和卡片宽度完全一致 */
  visibility: hidden; /* 隐藏伪元素，不影响视觉 */
  height: 0; /* 避免伪元素占用高度 */
}

.product-card {
  flex: 0 0 calc((100% - 40px)/3);
  display: flex;
  flex-direction: column; /* 保证卡片等高 */
}

注意这里伪元素的宽度必须和卡片的宽度完全匹配，不然还是会出现布局错位的问题。

另外，要确保卡片内部用flex-direction: column，这样不管卡片内容多少，都能保持等高，完美实现你要的等高产品卡片网格效果。

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