flex布局中column-gap和row-gap无效，仅gap属性生效且需配合flex-wrap:wrap；gap双值语法按主轴/交叉轴解析，并非直观的水平/垂直映射。
不能在 Flex 布局中使用 column-gap 或 row-gap —— 浏览器会静默忽略它们。 这不是书写错误，而是规范限制：Flex 容器只识别 gap，不解析 column-gap/row-gap 这两个属性。
为什么 column-gap 在 display: flex 容器上无效
Flex 布局的间距控制模型和 Grid 不同：column-gap 和 row-gap 是 Grid 的原生轴向控制属性，在 Flex 中没有语义映射。即使你写了 column-gap: 12px，开发者工具的 computed 样式里也看不到它，CSS 引擎直接跳过。
- Chrome/Firefox/Safari 对
column-gap在 Flex 容器上的行为一致：不计算、不继承、不报错 - 想验证？打开 DevTools → Elements → 查看该元素的 Styles 面板 → 搜索
column-gap，它不会出现在 computed 值中 - 唯一能生效的写法是
gap（或其单值/双值形式），且必须配合flex-wrap: wrap才能在 Safari 14–15 等旧版中稳定显示
gap 在 Flex 中怎么写才真正起作用
gap 是 Flex 容器唯一支持的间距属性，但它不是“自动适配方向”的黑盒——它的双值语法严格对应主轴/交叉轴，不是“水平/垂直”直觉映射。
- 当
flex-direction: row（默认）时：gap: 8px 12px→row-gap: 8px（控制垂直方向行间距），column-gap: 12px（控制水平方向列间距） - 当
flex-direction: column时：gap: 8px 12px→row-gap: 8px（仍控制垂直方向，即相邻 item 间的纵向空隙），column-gap: 12px（控制水平方向，即 item 内容左右扩展空间） -
gap: 0或gap: 8px 0是合法写法，但0表示真设为零间距，不是“禁用”，子项会贴在一起 - 务必加
flex-wrap: wrap，否则 Safari 14–15 及部分旧 Android WebView 会完全忽略gap
Flex 中 gap 和 margin 混用的常见陷阱
gap 是容器级间隙，margin 是 item 级外边距，两者共存时不会合并或抵消，而是叠加。
- 给第一个子项加
margin-left，会导致整行左偏移，破坏justify-content: center效果 -
gap不影响justify-content/align-items的计算基准，margin会 - 如果用
margin模拟首尾留白，再加gap，容易造成双倍空白 —— 特别是在响应式断点切换时 - 真正需要“仅首项左空、末项右空”时，
gap无法替代margin，得用:first-child/:last-child单独处理
真正麻烦的点不在语法，而在于浏览器对 gap 的实现差异：Safari 14–15 要 flex-wrap 才认，IE 完全不支持，而 column-gap/row-gap 在 Flex 里连降级 fallback 都没意义——它们压根不进样式引擎。所以别试，直接换 gap + flex-wrap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
