gap只对flex或grid容器生效，其他布局下被静默忽略；需确保父容器设display:flex/grid，子项为直系元素且未脱离文档流，旧版Safari需用row-gap/column-gap加前缀。
gap 为什么在居中布局里经常“不生效”
不是 gap 写错了，而是它根本没被浏览器识别——gap 只对 display: flex 或 display: grid 容器生效，其他任何布局（比如 display: block）下它会被静默忽略。
常见错误现象：
- 给
<ul></ul>写了gap: 12px，但菜单项之间没间距 - 用
justify-content: center居中后，gap看起来“没作用”，其实是父容器没设display: flex
实操建议：
- 先确认父容器是否已设
display: flex或display: grid，且未被display: contents、inline等覆盖 - 检查子元素是否被
display: none、float或position: absolute脱离文档流——它们不参与gap计算 - 旧版 Safari（≤14.0）不支持单值
gap: 12px，得拆成row-gap: 12px; column-gap: 12px;，并加-webkit-前缀
gap 和 justify-content: space-between 的区别与配合
gap 控制的是相邻子项之间的空隙，而 justify-content: space-between 是把首尾子项“推到容器两端”，中间均分剩余空间。两者逻辑不同，不能互相替代，但可以共存。
立即学习“前端免费学习笔记（深入）”；
使用场景：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 需要菜单项均匀分布、首尾贴边 → 用
justify-content: space-between（前提是ul是 Flex 容器，li是直系子项） - 只要等距、不要求首尾贴边 →
gap更干净，且不会因子项数量变化导致间距突变 - 既想居中整体，又想控制项间距离 →
justify-content: center+gap，例如双 hero 图并排展示
容易踩的坑：
- 在
flex-wrap: wrap下，justify-content: space-between对折行无效，此时应改用justify-content: flex-start+gap -
gap不影响首尾项与容器边缘的距离，如需留白，得靠padding，不是margin
Flex 中 gap 对齐失效的典型结构问题
最常被忽略的一点：justify-content 和 align-items 是容器属性，只作用于其**直系子元素**。如果你的 HTML 是 <nav><ul><li>Home</li></ul></nav>，却只给 <nav></nav> 设 display: flex，那 <ul></ul> 才是 Flex 项目，<li> 完全不受控。
实操建议：
- 把
display: flex、justify-content、gap都加在<ul></ul>上，让<li>成为真正的 Flex 子项 - 若需左右分组（如 logo 左、菜单右），应设两级 Flex：
<nav></nav>用display: flex; justify-content: space-between，内部两个<ul></ul>分别作为左右容器 - 避免在
<ul></ul>里混入空格、换行符或无意义的<div> 包裹层，它们会破坏 Flex 直系关系<h3>gap 在 Grid 中的行列控制与单位陷阱</h3> <p><code>gap在 Grid 中支持双值简写：gap: 1rem 0.5rem表示row-gap: 1rem、column-gap: 0.5rem。顺序不能颠倒，也不是“列先行”。性能与兼容性影响：
-
gap不触发重排（reflow），但会影响子项可用空间；例如grid-template-rows: repeat(3, 1fr)+gap: 20px，实际占用 40px 行间隙（2 个间隔） -
gap不支持百分比值（如gap: 2%），也不支持calc()嵌套（如gap: calc(1rem - 2px) 1fr是非法的） - IE 全系不支持
gap，@supports (gap: 1rem)在 Safari 14.0 及更早也无效，降级需 JS 检测或服务端 UA 判断
真正难处理的不是语法，而是设计需求和
gap能力的错位：它只能统一控制整个容器的间距。如果第一组卡片要 24px 间距、第二组缩到 8px，必须拆成两个独立容器，而不是试图用:nth-child去 hack 子项。 -
