gap是Flex步骤条布局的刚需而非可选优化，必须满足display: flex、子项非display: none、需换行时加flex-wrap: wrap三前提；单值gap: 24px设等距，双值gap: 0 32px控水平间距；伪元素连接线需清空子项margin以避免叠加；老Safari需row-gap/column-gap降级。
gap 在步骤条布局中不是“可选优化”，而是避免 margin 崩溃的刚需。直接结论：用 display: flex + gap 是最稳路径，但必须满足三个前提条件，缺一不可。
Flex 步骤条启用 gap 的硬性前提
浏览器不会报错，但写了 gap 却没效果，90% 是因为以下任一条件未达成：
-
display: flex或display: inline-flex必须在父容器上生效，且不能被display: contents、display: none或父级overflow: hidden意外截断 - 子元素不能是
display: none—— 它不参与 Flex 计算，gap对它无效 - 若步骤条需换行（如小屏堆叠），必须显式加
flex-wrap: wrap；否则row-gap不起作用
gap 值怎么写才不翻车？顺序和单位是关键
常见错误是把 gap: 1rem 2rem 当成“左右间距”，其实它是 row-gap column-gap，即“行间距 1rem，列间距 2rem”。步骤条通常是横向排列，重点在列间距：
- 单值写法：
gap: 24px→ 行列都为 24px（适合等距步骤） - 双值写法：
gap: 0 32px→ 行间距为 0（避免上下空隙），列间距为 32px（控制步骤间水平距离） - 单位必须合法：
gap: 1无效；gap: 1rem、gap: 2vh可用；gap: 5%在 Flex 中不支持（仅 Grid 列间距允许 %） - 别混用：
gap: 24px和column-gap: 16px同时存在时，后者会覆盖前者列方向的值，导致不一致
步骤条连接线怎么和 gap 配合不打架？
伪元素（如 ::after）画连接线时，若子项自身有 margin-right，再叠加容器 gap，视觉间距会翻倍。正确做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 子项自身清空
margin，完全交由gap控制间距 - 连接线用绝对定位从容器内侧出发，例如：
.step:not(:last-child)::after { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: calc(100% - 100%); height: 2px; }—— 这里width依赖gap提供的空白，而非手动算像素 - 若设计要求首尾无连接线，但中间有固定间隔，
gap无法差异化控制，必须拆成两个容器：.steps-main（含 gap） +.step-first（单独包裹首项）
兼容老 Safari 怎么安全降级？
Safari 14.0 及更早版本不支持 gap 简写（包括单值和双值），但支持 row-gap 和 column-gap 独立声明。稳妥写法是：
/* 先写兼容属性 */
.steps {
row-gap: 0;
column-gap: 24px;
}
/* 再用 @supports 覆盖现代浏览器 */
@supports (gap: 1px) {
.steps {
gap: 0 24px;
}
}
注意：@supports (gap: 1px) 在 Safari 14.0 会返回 false，所以 fallback 一定得写在前面；另外 IE 全系不支持，服务端或 JS UA 检测仍是必要兜底手段。
真正难的不是设对 gap 数值，而是当 UI 要求“第 1→2 步距 24px，第 2→3 步距 8px”时，意识到 gap 是容器级统一控制——这种非均质间距，只能靠结构拆分，没法靠 CSS 选择器 hack 子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
