是的，gap 属性在现代浏览器中对 Flexbox 容器完全有效，自 Chrome 85 / Firefox 63 / Safari 14.1 起正式支持；需作用于 flex 容器，等价于 row-gap 或 column-gap，优于 margin 实现列间距。
gap 属性在 Flexbox 中是否有效
是的，
属性在现代
浏览器
中对 Flexbox 容器完全有效——但仅限于
Flexbox 从 Chrome 85 / Firefox 63 / Safari 14.1 起才正式支持
。早期版本（如 Safari 14.0 或旧版 Edge）会直接忽略
，导致列间距为 0，视觉上紧贴在一起。
用 gap 设置列间距的正确写法
必须作用于 flex 容器（即设置了
或
的父元素），且只影响直接子项之间的间隙，不作用于首尾项与容器边缘之间。
是
和
的简写，水平
排列
（
）时，
等价于
若需单独控制列间距（比如垂直排列时的“行”间距），优先用
；但 Flexbox 中更常见的是水平布局，此时应使用
值支持长度单位（
、
）、百分比（仅在部分场景生效，不推荐用于列间距）和
（等同于
）
gap 与 margin 实现列间距的区别
用
模拟列间距容易出错：比如给每个子项加
，最后一项会多出无意义的空白；而
是容器级控制，天然规避该问题。
不会触发 margin 合并，也不影响子项的盒模型尺寸计算
在响应式中更稳定——配合
，换行后行与行之间也会自动应用
若需兼容 IE 或老 Safari（margin +
，例如：
常见失效原因和调试建议
如果写了
却没看到间距，大概率不是语法错，而是环境或层级问题：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
检查父容器是否真的启用了 Flexbox：
必须是
或
，
或
下
行为不同
确认子项没有设置
或固定宽高导致溢出，从而掩盖了间隙视觉效果
用浏览器开发者工具检查 computed 样式里
是否被标记为 “invalid” 或 “overridden”——常见于 CSS 优先级冲突或属性拼写错误（比如写成
）
Safari 14.0 及更早版本不支持
在 Flexbox 中使用，必须升级或降级方案
真正麻烦的不是怎么写
，而是得时刻想着它在哪能用、在哪会被静默忽略——尤其当项目要支持
mac
OS Big Sur 之前的系统时。
gapgapdisplay: flexdisplay: inline-flexgaprow-gapcolumn-gapflex-direction: rowgap: 12pxrow-gap: 12pxcolumn-gaprow-gappxremnormal0.container {
display: flex;
gap: 16px; /* 所有相邻子项间水平间距 16px */
}marginmargin-rightgapgapgapflex-wrap: wraprow-gap:not(:last-child).item:not(:last-child) { margin-right: 16px; }gapdisplayflexinline-flexinline-blockgridgapflex: nonegapgabgapgap