如何为行内动态数量的卡片设置统一的左右内边距？

方案1：使用gap属性（推荐，现代浏览器兼容） #

你遇到的问题本质是justify-content: space-between会将行内剩余空间全部分配到元素间隙，行内卡片不足3个时就会出现中间大空白的问题。改用justify-content: flex-start搭配gap控制间距即可解决。

首先修正你的HTML语法错误（原cardEach的class属性缺少闭合引号）：

<div class="card">
  <div class="cardEach">
  </div>
  <div class="cardEach">
  </div>
  <div class="cardEach">
  </div>
  <div class="cardEach">
  </div>
  <div class="cardEach">
  </div>
</div>

修改后的CSS代码：

.card{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* 替换space-between为左对齐 */
    justify-content: flex-start;
    /* 自定义卡片间距，可设固定值如20px，也可用百分比 */
    gap: 3%;
}
.cardEach {
    /* 一行3个卡片，减去2个间隙的总宽度后三等分 */
    width: calc((100% - 2 * 3%) / 3);
    box-sizing: border-box;
}

如果需要固定间距，调整对应参数即可：

.card {
    gap: 20px;
}
.cardEach {
    width: calc((100% - 40px) / 3);
}

方案2：兼容旧浏览器（无gap支持） #

如果需要兼容IE等不支持gap的老旧浏览器，可以用margin模拟间距：

.card{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}
.cardEach {
    width: 31.3%;
    box-sizing: border-box;
    margin-right: 3%;
    margin-bottom: 3%; /* 可选，控制行间距 */
}
/* 每行第三个卡片去掉右侧边距 */
.cardEach:nth-child(3n) {
    margin-right: 0;
}

两种方案最终都能实现无论一行放2张还是3张卡片，卡片间距完全统一的效果。

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