如何解决Flexbox子元素数量变化时的均匀间距左对齐问题？

你的问题出在justify-content: space-between的特性和卡片宽度计算不匹配上：space-between会把容器剩余空间均匀分配到元素间隙，导致实际间距不等于你设置的gap；同时伪元素的存在会干扰5张卡片的布局。按以下方式修改即可解决：

修改思路 #

• 改用justify-content: flex-start让卡片左对齐，间距完全由gap控制
• 用calc()精确计算卡片宽度，确保一行刚好放下指定数量的卡片，同时预留间隙空间
• 移除伪元素，因为flex-start本身就能让最后一行不足列数的卡片左对齐

修改后的代码 #

CSS #

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  justify-content: flex-start; /* 改为左对齐 */
  background-color: lightgreen;
}

.child {
  /* 5列布局：总宽度减去4个间隙的宽度，再平分给5个卡片 */
  flex-basis: calc((100% - 4*20px)/5);
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 防止卡片内容溢出时撑大宽度 */
  min-width: 0;
}

@media only screen and (max-width : 1024px) {
  /* 平板2列布局：总宽度减去1个间隙的宽度，平分给2个卡片 */
  .child {
    flex-basis: calc((100% - 1*20px)/2);
  }
}

@media only screen and (max-width : 768px) {
  /* 移动端1列布局 */
  .child {
    flex-basis: 100%;
  }
}

HTML（无需修改） #

<div class="parent">
  <div class="child"> <span>1</span> </div>
  <div class="child"> <span>2</span> </div>
  <div class="child"> <span>3</span> </div>
  <div class="child"> <span>4</span> </div>
  <div class="child"> <span>5</span> </div>
</div>

说明 #

• 宽屏时，calc((100% - 4*20px)/5)确保5张卡片加上4个20px的间隙刚好填满容器宽度，不会有剩余空间导致间距异常
• 平板和移动端同理，按列数计算对应的卡片宽度，保证布局一致
• 新增min-width:0是为了避免卡片内内容过长时，撑大卡片宽度导致布局错乱

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