最推荐用gap属性控制Flex子项间距，简洁无副作用；兼容老浏览器时才用margin并注意首尾间距问题，二者不可混用以免间距叠加。
Flex子项之间保留固定距离，最推荐用 gap 属性，简洁、语义清晰、无副作用；如果兼容性要求高（比如要支持 IE），才考虑用 margin 手动控制，但要注意避免首尾多出间距的问题。
用 gap 最省心
在 flex 容器上设置 gap（或 row-gap/column-gap），就能统一控制子项之间的横向和/或纵向间距，且不会影响首项前、末项后的空白。
- 只设水平间距：
gap: 0 12px或column-gap: 12px - 只设垂直间距：
gap: 8px 0或row-gap: 8px - 行列都设：
gap: 8px 12px（等价于row-gap: 8px; column-gap: 12px） - 注意：gap 在 flex 布局中从 Chrome 84+、Firefox 63+、Safari 14.1+ 开始原生支持，现代项目基本可放心使用
用 margin 要小心首尾
如果必须兼容老浏览器（如 IE），可用 margin 模拟间隔，但得主动规避“第一项左边有空、最后一项右边也有空”的常见错误。
- 通用做法：给所有子项加
margin-right: 12px，再给最后一个子项margin-right: 0 - 更简洁写法：
:not(:last-child) { margin-right: 12px; } - 如果是竖排（
flex-direction: column），换成margin-bottom和:not(:last-child) - 不建议用
first-child减 margin，因为逻辑不如not(:last-child)直观稳定
别混用 gap 和 margin
gap 是容器级控制，margin 是子项级控制。两者同时存在时，间距会叠加，容易超出预期。
立即学习“前端免费学习笔记（深入）”；
- 例如：容器设了
gap: 10px，子项又设了margin: 5px→ 实际间距变成 15px - 调试时可临时取消其中一项，确认是否真需要双重间距
- 响应式场景下，优先用 gap 配合媒体查询调整值，比批量重写 margin 更易维护
基本上就这些。gap 是现代方案首选，margin 是兜底手段，用对了都不复杂但容易忽略细节。
