Safari 14.0及更早版本（iOS 14.0–14.4）静默忽略gap简写，必须拆分为row-gap和column-gap才能生效；其根本原因是WebKit未实现CSS Box Alignment Level 1中gap属性的解析，而非写法错误。
移动端评论区用 gap 布局，Safari 14.0 及更早版本会静默忽略 gap: 12px，必须拆成 row-gap 和 column-gap 才能真生效。
为什么评论列表的 gap 在 iOS 14 真机上“消失”
这不是 CSS 写错了，也不是没加载成功——Safari 14.0（对应 iOS 14.0–14.4）压根不解析 gap 简写，包括单值 gap: 16px 和双值 gap: 8px 16px。DevTools 的 Computed 面板里根本看不到它，-webkit-gap 也无效。
常见现象：
- 开发时 Chrome 正常，一上 iPhone 就贴在一起
- 检查元素发现父容器已设
display: flex，但子项之间没空隙 - 加了
padding或margin临时顶替，结果首尾多出空白或响应式错位
row-gap 和 column-gap 必须分开写，不能省
安全写法就是放弃 gap 简写，直接声明两个独立属性。所有现代移动浏览器（Chrome for Android、Firefox iOS、Safari ≥14.0）都支持，且语义明确、无歧义。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 等距评论流：
row-gap: 16px; column-gap: 16px; - 只想要垂直间距（比如竖排头像+文字）：
row-gap: 12px; column-gap: 0; - 卡片式评论（多行换行）：
flex-wrap: wrap;必须加，否则row-gap不触发 - 别混用：
gap: 12px和row-gap: 8px同时存在时，后者覆盖行距，列距仍为 12px，视觉失衡
评论容器必须满足 Flex 布局前提，否则 gap 彻底失效
gap 只对 display: flex 或 display: grid 容器起作用，且有硬性条件：
- 父元素不能是
display: block或被display: contents包裹——后者会让子项脱离渲染树，gap失去作用对象 - 子项不能设
flex-shrink: 0且内容过长，否则容器被撑满，“间隙”被视觉压缩不可见 - 首尾留白不是
gap的事：gap只管子项之间，左右贴边需靠容器padding: 0 16px - 若设计稿要求“最新评论 24px、历史评论 8px”，别用选择器 hack 子项，直接拆成两个独立容器（如
.comments-latest和.comments-history）
兼容 IE11 或极老安卓 WebView 怎么降级
IE 全系不支持 gap，@supports (gap: 1rem) 无法兜底。稳妥方案是：
- 服务端 UA 判断或 JS 检测后加 class（如
no-gap），再用margin-bottom回退 - 避免
:not(:first-child)这类选择器——在部分旧 WebView 中不稳定 - 回退样式建议统一用 CSS 变量：
--comment-gap: 16px;，正常走row-gap: var(--comment-gap)，降级走margin-bottom: var(--comment-gap) - 别用百分比单位：
gap不支持%（Grid 中列间距除外，但评论区基本用不到）
真正难的不是写对 row-gap，而是意识到：当产品说“头像和文字之间要 8px，文字和时间戳之间要 12px”，那已经超出了单个容器 gap 的能力边界——得用嵌套容器或 display: contents + 子级 gap 来分层控制，而不是强行在一个 flex 容器里堆 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
