gap仅对真实flex容器生效，需确保父容器display为flex/inline-flex且未被覆盖，flex-wrap: wrap是row-gap生效前提，且gap只作用于直接子元素。
gap只对真实生效的flex容器起作用
写了gap: 12px却没看到任何间距，第一反应不是浏览器bug，而是父容器根本没进入flex上下文。打开开发者工具看computed样式，display必须是flex或inline-flex，且不能被后续规则（比如display: block、float: left、position: absolute）覆盖。
常见踩坑点：
- Bootstrap项目里只加了
gap-3类，但漏掉d-flex——gap-*类不会自动开启flex布局 - CSS-in-JS中样式注入顺序错乱，导致
display: flex被后面动态插入的display: block覆盖 - 父容器用了
display: contents，但子节点未正确透传，flex上下文实际中断
flex-wrap没显式声明时row-gap无效
row-gap在换行场景下不生效，几乎总是因为漏掉了flex-wrap: wrap。规范要求：只有当容器同时满足display: flex和flex-wrap: wrap（或wrap-reverse）时，row-gap才控制行与行之间的空白。
容易误判的情况：
- 子项总宽度未超容器，根本没触发换行，
row-gap自然无从体现 - 用了
flex-direction: column，此时row-gap控制的是“列之间”的垂直间距，和视觉上的“换行”无关 - 容器有固定
height但align-content: stretch（默认值）在拉伸行高，看起来像有大空白，其实不是row-gap在起作用
子元素不是独立flex项目，gap完全不参与计算
如果图标和文字写在同一标签里，比如<button><i class="icon"></i>提交</button>，那么<i></i>和文字只是button的内容文本节点，并非flex项目。gap只作用于flex容器的**直接子元素**，对内部文本、伪元素、注释节点全部无视。
必须拆成多个子元素才能让gap生效：
- ✅ 正确：
<button class="btn"><i class="icon"></i><span>提交</span></button>，再给.btn设display: flex和gap - ❌ 错误：
<button><i></i>提交</button>，哪怕加gap也毫无反应 - ⚠️ 注意：DOM中隐藏节点（
display: none）、HTML注释、换行符都会影响子元素顺序判断，调试时建议用DevTools的Flexbox overlay确认哪些节点被识别为item
旧版Safari或IE中gap被直接忽略
Safari ≤14.1、iOS Safari ≤14.5、IE所有版本根本不解析gap在flex中的声明——不是渲染异常，是CSS解析器直接丢弃该属性。加-webkit-gap等前缀也无效，因为标准支持尚未落地。
降级方案要避开常见陷阱：
- 横向布局优先用
:not(:last-child) { margin-right: 12px; }，比负margin更稳 - 启用
flex-wrap后，纯CSS margin方案无法区分“行内间隔”和“行间间隔”，此时应考虑改用display: grid或轻量JS补全 - 务必用
@supports (gap: 1px)包裹现代写法，否则旧浏览器可能因解析失败导致整条规则失效
flex值、甚至是否设置了align-items都无关——它只取决于三件事：容器是否真为flex、是否满足换行前提、子元素是否为真实DOM子节点。其他所有“看起来像间距”的现象，大概率是align-content、基线对齐、文本节点或margin叠加造成的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
