Flex布局中gap仅在子元素左侧添加间距，求原因排查

核心问题 #

你遇到的gap仅左侧显示的问题，本质是flex子元素被压缩+容器缺少滚动约束导致的：

• 默认flex-shrink: 1会让子元素在视口变窄时被挤压宽度，gap的空间被压缩变形，看起来只有左侧有间距；
• 容器未设置横向滚动规则，溢出的内容被隐藏或挤压，无法正常展示gap的分布。

修复方案 #

恢复使用gap属性，同时给容器和子元素添加以下关键样式：

.sections {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
  /* 添加横向滚动支持 */
  overflow-x: auto;
  /* 强制子元素不换行（默认是nowrap，显式设置更稳妥） */
  flex-wrap: nowrap;
}

/* 禁止子元素被压缩，保证宽度与间距正常 */
.sections > * {
  flex-shrink: 0;
}

原理说明 #

1. overflow-x: auto：让容器在内容超出视口时显示横向滚动条，满足小视口下的滚动需求；
2. flex-shrink: 0：固定子元素宽度，避免被压缩，确保gap能均匀分布在子元素之间，不会出现单侧间距异常；
3. 移除子元素的左右内边距，用gap统一控制间距，布局更简洁可控。

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