Flex容器内动态增减项目的最优间距设置方法咨询

现有margin-right方案的缺陷 #

• 会在最后一个flex项目的右侧生成多余边距，需要额外编写:last-child选择器清除边距，增加冗余代码
• 若后续启用flex换行（flex-wrap: wrap），无法同时统一控制纵向行间距，需要额外配置垂直margin，且需要处理最后一行的多余边距问题，维护成本高

最优方案：使用Flex原生gap属性 #

gap是Flex布局原生提供的间距控制属性，是当前适配动态增删项目场景的最优解，优势如下：

• 仅在相邻flex项目之间生成间距，不会在容器边缘和项目之间产生多余边距，无需额外编写规则处理首尾项目的边距，动态新增/删除项目时会自动适配间距
• 支持分别配置横向、纵向间距，如需启用flex换行，仅需增加row-gap配置即可实现统一的行间距控制，无需额外调整项目样式

代码示例 #

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  justify-content: flex-start;
  /* 配置横向项目间距，可按需调整数值 */
  column-gap: 20px;
  /* 如需支持换行，可新增以下两个配置
  flex-wrap: wrap;
  row-gap: 16px; */
}

.item {
  /* 此处保留你的原有项目样式，无需额外配置margin实现间距 */
  width: 60px;
  height: 60px;
  background: #e5e7eb;
}

兼容旧浏览器的降级方案 #

若需要兼容IE等不支持gap属性的老旧浏览器，可以使用优化后的margin方案：

.container {
  display: flex;
  justify-content: flex-start;
}
/* 仅给非最后一个的项目添加右侧间距，动态增删项目时可自动适配 */
.item:not(:last-child) {
  margin-right: 20px;
}

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