如何仅用CSS实现响应式列表（含非满行）的项目间距均等？

问题根源 #

你当前使用justify-content: space-between的Flex布局，当最后一行元素数量少于每行最大容纳数时，剩余空间会被分配到最后一行的元素间隙中，导致和上排行距不一致。

方案1：CSS Grid实现（推荐） #

这是目前最简洁、兼容性覆盖95%以上用户端的方案，无需额外hack，完全自适应容器宽度：

ul {
  width: 450px;
  padding: 0;
  margin: 0;
  display: grid;
  /* 自动填充宽度为100px的列，自动计算每行可容纳数量 */
  grid-template-columns: repeat(auto-fill, 100px);
  /* 列间距自动平均分配，所有行间距统一 */
  justify-content: space-between;
  /* 可自定义行间距 */
  row-gap: 20px;
  border: 1px solid #F00;
  list-style: none;
}

li {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

效果验证 #

当父容器宽度为320px时，每行可放3个宽度100px的元素，剩余20px会被平均为2个10px的列间距，和你的需求完全匹配；最后一行如果只有2个元素，右侧会自动留出110px（100px元素宽度+10px间距）的空白。

方案2：Flex布局兼容方案 #

如果需要兼容IE11等旧版本浏览器，可以用伪元素占位的hack实现：

ul {
  width: 450px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 可自定义行间距 */
  row-gap: 20px;
  border: 1px solid #F00;
  list-style: none;
}

li {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

/* 关键占位伪元素，宽度和li保持一致即可 */
ul::after {
  content: "";
  width: 100px;
}

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