应使用gap属性替代margin控制flex子元素间距。gap专用于项目间留白，不干扰首尾，支持row-gap/column-gap，兼容主流浏览器，且响应式更易维护。
flex布局中子元素间距不均匀，通常是因为用了margin手动控制间隔，导致首尾多出空白或响应式下错乱。最直接有效的解法是改用gap属性——它专为容器内项目间留白而设计，只作用于项目之间，不会影响首项前、末项后。
gap比margin更干净可靠
gap（含row-gap和column-gap）是Flex和Grid原生支持的间距控制方式，浏览器自动计算并均分间隙，无需额外类名或伪元素。尤其在flex-wrap换行时，gap能保持行与行之间的垂直间距一致，而margin方案容易漏掉最后一行的bottom margin或产生双倍间距。
- Flex容器需声明
display: flex或display: inline-flex - 直接在容器上设置
gap: 12px（等效于row-gap: 12px; column-gap: 12px） - 若只需横向或纵向间距，可单独用
row-gap或column-gap
兼容性要注意但已很稳妥
现代主流浏览器（chrome 84+、firefox 63+、safari 14.1+、edge 84+）均已完整支持gap在Flex布局中的使用。如需兼容旧版Safari（@supports判断，降级回margin方案：
container { display: flex; /* 旧浏览器 fallback */ margin: -6px; } container > * { margin: 6px; } @supports (gap: 12px) { container { gap: 12px; margin: 0; } container > * { margin: 0; } }避免和justify-content冲突
当同时使用justify-content: space-between（或space-around、space-evenly）和gap时，两者会叠加生效：前者控制主轴剩余空间分配，后者固定项目间物理距离。如果发现间距“过大”，大概率是二者混用导致。建议明确分工：
立即学习“前端免费学习笔记（深入）”；
- 要等距排列（含首尾到容器边缘距离相等）→ 用
justify-content: space-evenly，不用gap - 要固定项目间隙、首尾贴边 → 用
gap，搭配justify-content: flex-start（默认值） - 需要两者兼顾？优先选
gap，再用padding给容器整体留边
响应式场景下gap更易维护
用媒体查询调整间距时，gap只需改一个属性，而margin方案要同步修改多个方向的值（比如同时调margin-left和margin-right），还容易遗漏子元素。例如：
@media (max-width: 768px) { .container { gap: 8px; } }- 比写
.item { margin: 4px; }再在媒体查询里重置所有margin更简洁安全