gap是容器级统一声明的轨道间隙，非元素边距；双值写法gap: 12px 8px中第一值为row-gap（行间距），第二值为column-gap（列间距），顺序不可颠倒。
gap 不是“分配”出来的，而是容器级统一声明的轨道间隙；它不计算、不叠加、不继承，只在相邻子项之间生效——写错前提或混用属性，就等于没写。
gap 的值怎么写才不会错行距列距
浏览器严格按顺序解析双值：gap: 12px 8px 中第一个值是 row-gap（行间距），第二个是 column-gap（列间距），顺序颠倒就会布局错位。单值写法如 gap: 16px 表示行列都为 16px。
-
gap: 0 12px→ 行间无空隙，列间 12px（适合横向滚动导航） -
gap: 8px 0→ 列间无空隙，行间 8px（适合垂直堆叠卡片） - 别写
gap: 1rem 2rem却以为“列先”，实际是行 1rem、列 2rem - 百分比值（如
gap: 2%）在大多数场景下效果微弱，且不推荐——它基于容器内联尺寸，不是子项宽高
Safari 14.0 及更早版本 gap 失效的根本原因
这不是加载失败或 CSS 没生效，而是 Safari 14.0 完全忽略 gap 简写（包括单值和双值），DevTools 的 Computed 面板里根本看不到该属性。但它支持 row-gap 和 column-gap 独立声明。
- 安全写法始终是分开写：
row-gap: 12px; column-gap: 12px; -
-webkit-gap在 Safari 14.0 中也无效，加了白加 - iOS 14.0–14.4 对应的 Safari 就是这个行为，覆盖约 3% 的存量用户（截至 2026 年 10 月）
- 不要混用：
gap: 10px和row-gap: 20px同时存在时，行距取后者，列距仍为 10px，视觉失衡
Flex 容器中 row-gap 为什么看起来没作用
row-gap 在 Flex 布局中只对“换行后”的行间起效，如果容器没换行，它就完全不触发。这不是 bug，是规范定义的行为。
- 必须加
flex-wrap: wrap，否则row-gap被静默忽略 - 父容器
display必须是flex或inline-flex，block下所有 gap 相关属性无效 - 子项设了
flex-shrink: 0且内容过宽，会撑满容器，间隙被“压扁”不可见 - 避免用
display: contents包裹子项——它让子项脱离渲染树，gap 失去作用对象
首尾留白、响应式断点、差异化间距怎么处理
gap 只管子项之间，不管容器边缘。设计稿里常见的“左右留白 16px + 子项间 12px”，不能靠 gap 解决。
- 首尾留白必须用容器
padding：例如padding: 0 16px - 响应式调间距，直接改
row-gap/column-gap值，别切回 margin —— 否则逻辑割裂、维护成本飙升 - “第一组卡片间距 24px，第二组缩到 8px”？gap 是容器级统一控制，这种需求必须拆成两个独立容器，而不是用选择器 hack 子项
- 需要兼容 IE11？现代项目基本不用考虑；若真遇到，用子项
padding+box-sizing: border-box模拟，别回退负 margin
真正难的从来不是语法，而是意识到 gap 是容器的“轨道规则”，不是元素的“边距属性”。一旦把它当成 margin 的替代品去凑、去 hack、去混用，问题就从 CSS 层面下沉到了结构认知层面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
