flex中column-gap始终控制主轴方向相邻项间距：row时为水平间距，column时为垂直间距；它不作用于首/末项，也不影响跨行项，且自chromium 84起原生支持。
它不是“开始起作用”，而是从 Chromium 84（2020年中）起，gap、row-gap 和 column-gap 就正式被支持用于 Flex 容器了——column-gap 在 Flex 中生效，是因为它现在是 Flex 布局的原生属性，不是“借用”多列布局的逻辑。
Flex 中的 column-gap 到底控制什么？
它只在 flex-direction: row（默认）或 row-reverse 时生效，控制的是主轴方向上相邻 flex item 之间的水平间距；如果 flex-direction: column，那 column-gap 实际控制的就是垂直间距——因为此时“列”方向就是主轴方向。
-
column-gap不管你有没有换行（flex-wrap: wrap），只认“同一行内相邻项” - 它不作用于首项左侧、末项右侧，也不影响跨行项之间（那是
row-gap的事） - 值为
normal时等价于1em，和 grid 中行为一致
为什么以前用 margin 很容易出错？
典型错误是给每个 flex item 写 margin-right: 12px，结果最后一项也多出右边距，导致容器宽度溢出或换行异常。
-
margin受外边距合并影响（尤其在flex-direction: column时） - 响应式场景下，列数变化时需配合
:nth-child或 JS 动态删 margin，极易漏边界 -
gap系列属性完全隔离于子项盒模型，不触发任何 collapse，也不受overflow: hidden截断
兼容性要注意哪些实际卡点？
Safari ≤ 14.1（即 macOS Big Sur 及更早系统）对 Flex 中的 gap 支持不完整：它认 gap，但可能忽略单独写的 column-gap 或 row-gap。
- 稳妥写法是优先用
gap: 12px（同时设行列），再加row-gap/column-gap覆盖特殊需求 - 真要兼容 Safari 14.0 及以下，得回退到
margin+:not(:last-child)，但必须配合flex-wrap: wrap的换行逻辑重算 - 注意：Firefox 自 63 起全支持，Chrome/Edge 84+ 全支持，现代项目基本可放心用
真正容易被忽略的是：当 flex-direction 动态切换（比如响应式从 row → column），column-gap 的含义会跟着变——它始终绑定“主轴”，而不是固定指“水平方向”。这点和 grid 中的 column-gap（永远指列轨道间）有本质区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
