gap只控制间隙不控制对齐，需配合justify-content和align-items及flex容器才能正确排布；Safari 14–15.6需用row-gap/column-gap替代单值gap。
gap 本身不控制对齐，只管间隙；用 gap 却“排不齐”，八成是没设 justify-content 或 align-items，或者父容器压根不是 flex。
为什么 gap 设了但徽标还是左贴边、右贴边、中间空着
这是最常踩的坑：以为 gap 能自动居中或均分，其实它只负责“项目之间的空隙”，不管“项目整体怎么摆”。默认情况下，flex 容器的 justify-content 是 flex-start，所以首尾徽标紧贴容器边缘，看着像被撑开。
- 必须给徽标容器（比如
.tag-group）显式加display: flex和justify-content: center（居中）或space-between（两端对齐） - 如果容器本身是
inline-flex或嵌套在非 flex 父级里，gap可能无效——先确认父级是否为display: flex或grid - 别依赖徽标自身
margin来模拟 gap；一旦响应式切换方向，手动 margin 会和 gap 冲突
徽标高度不一导致上下错位，align-items 该怎么选
纯文字徽标、带 SVG 图标的徽标、含数字角标的徽标，因 line-height、padding、基线渲染差异，容易在 flex 行内高低不平。这不是 gap 的问题，而是对齐策略没调对。
- 统一设
align-items: flex-start（顶部对齐），比默认的stretch更可控 - 所有徽标加
box-sizing: border-box和固定height（如height: 24px），避免仅靠padding控制尺寸 - SVG 图标务必加
flex-shrink: 0和显式width/height，否则可能被压缩变形 - 禁用
vertical-align——它在 flex 里无效，还容易干扰调试
响应式下徽标从横排切竖排，gap 还生效吗
生效，但必须主动改 flex-direction，gap 不会自己“感知”屏幕宽度并切换方向。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 横排时：
flex-direction: row; gap: 0.5rem - 竖排时（小屏）：
@media (max-width: 480px) { .tag-group { flex-direction: column; gap: 0.375rem; width: 100%; } } - 竖排下记得给每个徽标加
width: 100%或flex: 1，否则可能缩成窄条 - 文字徽标竖排时补
text-align: center，不然左对齐显得松散
Safari 15.6 以下不支持 gap，怎么安全兜底
旧版 Safari 会静默忽略 gap: 8px，既不报错也不生效。检测不到就等于没写。
- 永远用
row-gap: 8px; column-gap: 8px;替代单值gap，它在 Safari 14+ 就已支持 - 不要在同一规则里混用
gap和row-gap，层叠顺序不可控 - 若需 JS 检测，用
if ('gap' in document.documentElement.style)，但 CSS 层面兜底更可靠 - 真正难的不是兼容 gap，而是当设计要求“主徽标间距 12px、辅助徽标组间距 4px”时——
gap是容器级统一值，只能靠额外 wrapper 拆分作用域
复杂点不在 gap 语法本身，而在它和对齐、尺寸、响应式、浏览器能力的耦合关系——漏掉任意一环，视觉就“差一点”。
