Flex 布局子元素间距不均应优先使用 gap 而非 margin，因 gap 由容器控制、均匀可靠且不干扰布局流；需确保父容器为 display: flex，注意兼容性及避免与对齐方式混淆。
Flex 布局中子元素间距不均，通常是因为误用了 margin（尤其首尾元素多加了边距），或容器未启用 gap。优先用 gap，它专为容器内项目间距设计，干净、可控、不干扰布局流。
用 gap 替代 margin 实现均匀间距
gap 是 Flex（以及 Grid）原生支持的间距属性，作用于容器，自动在相邻子项之间插入等距空隙，不会影响首项前、末项后，也无需额外类名或选择器。
- 横向间距用
column-gap，纵向用row-gap，简写统一用gap（如gap: 12px表示行列均为 12px） - 仅需在父容器上设置：
display: flex; gap: 16px;，所有相邻子项间立刻获得一致间距 - 兼容性良好：Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+ 均已支持；旧版可配合
@supports回退
慎用 margin 处理间距的常见陷阱
靠给每个子项加 margin-right 或 margin-bottom 模拟间隔，容易导致首尾多出空白，需要额外清除。
- 错误写法：
.item { margin-right: 16px; }→ 最后一项右侧也会有 16px 空白 - 补救方式繁琐：用
:last-child { margin-right: 0; }，但响应式换行时失效（Flex 换行后 last-child 不再是视觉末尾） - 更糟的是用
nth-child计算，维护成本高且易出错
gap 不生效？检查这几点
gap 在 Flex 中虽简单，但有前提条件：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须是
display: flex（不能是inline-flex以外的其他 display 值） - 子元素不能是
flex: 0 0 auto且内容溢出导致换行异常（此时可加flex-wrap: wrap并确认 gap 在多行中是否按预期工作） - 避免与
justify-content: space-between等对齐方式混用造成视觉混淆——gap和对齐是正交控制，但效果叠加时需留意整体节奏
旧浏览器兼容方案（如需支持 IE 或老 Safari）
若必须兼容不支持 gap 的环境，可用“伪边距”技巧替代：
- 给父容器设负 margin 抵消首尾多余间隙：
margin: 0 -8px;，子项设padding: 0 8px; - 或用相邻兄弟选择器：
.item + .item { margin-left: 16px; }（仅适用于水平排列，且需确保 HTML 结构连续） - 不推荐用
margin-left配合:first-child清除，逻辑反直觉且易漏
