不能。column-gap 在 Flex 布局中无效，仅适用于 CSS 多列布局（需配合 columns/column-count/column-width）；Flex 间距应使用 gap（或 row-gap/column-gap），且需搭配 flex-wrap 才能体现换行间距。
不能。 column-gap 在 Flex 布局中不简化间距管理——它根本不起作用，除非你误用了属性名或混淆了布局模型。
column-gap 只在多列（columns）上下文中生效
写 column-gap: 16px 却没看到效果？不是浏览器问题，而是你没启用 CSS 多列布局。Flex 容器里设 column-gap 是无效的，它只响应 columns、column-count 或 column-width 触发的上下文。
- ✅ 正确用法：
.text { columns: 2; column-gap: 1.5rem; } - ❌ 错误用法：
.card-list { display: flex; column-gap: 16px; }—— 浏览器直接忽略 - ⚠️ 混用风险：同一选择器里同时写
gap: 12px和column-gap: 12px，后者在 Flex 中无意义，纯属冗余
移动端 Flex 间距该用 gap，不是 column-gap
Flex 布局中控制子项间距，正确且现代的方式是 gap（或拆分为 row-gap/column-gap），但它和多列的 column-gap 是同名不同源的两个属性。
-
gap: 12px 8px表示行距 12px、列距 8px；单值如gap: 16px则行列等距 - 必须搭配
display: flex和flex-wrap: wrap才能体现换行后的行间空白 - iOS Safari ≤14.1 对
row-gap支持不稳定，建议加回退：gap: 16px; row-gap: 16px; - 别用
margin模拟：换行时最后一项的margin-right会残留，破坏对齐
为什么有人误以为 column-gap 能用于 Flex
原因有三：一是看到属性名相似就迁移使用；二是调试时没检查 computed 样式，误以为 column-gap 生效了；三是旧项目混用了 PostCSS 插件（如 postcss-gap-properties），它会把 column-gap 自动转为 gap，造成“好像能用”的假象。
立即学习“前端免费学习笔记（深入）”；
- 真兼容方案：用
gap+@supports (gap: 0) {}降级到:not(:last-child)margin - 单位推荐
rem：避免缩放失准，也比em不受嵌套 font-size 干扰 - 切记：Flex 中的
column-gap不是gap的别名，它只是个被忽略的声明
真正要简化移动端 Flex 间距，盯住 gap，忘掉 column-gap —— 后者属于另一套布局体系，强行跨用只会让 DevTools 里多出一行灰色的“not applicable”。
