Safari 14.0 及更早版本不支持 gap 简写（含单值和双值），必须拆分为 row-gap 和 column-gap 才能生效；其根本原因是规范实现差异，而非写法错误，该版本静默忽略 gap 声明，DevTools Computed 面板中无值。
移动端用 gap 布局，Safari 14.0 及更早版本是主要兼容瓶颈，不是写法错，而是它根本不认 gap: 12px 这种单值写法——必须拆成 row-gap 和 column-gap 才能生效。
为什么 Safari 14.0 的 gap 总“失效”
这不是 bug，是规范实现差异：Safari 14.0 支持 row-gap 和 column-gap，但完全忽略 gap 简写（包括单值和双值）。很多开发者加了 gap: 16px 后在真机上看到空白消失，第一反应是 CSS 没加载，其实是浏览器静默跳过该声明。
- 用 DevTools 的 “Computed” 面板检查，会发现
gap根本没出现在计算值里 -
-webkit-gap在 Safari 14.0 中也无效，别白费力气加前缀 - iOS 14.0–14.4 对应的 Safari 就是这个行为，覆盖约 3% 的存量用户（截至 2026 年 10 月）
移动端安全写法：始终分开声明 row-gap 和 column-gap
不依赖 gap 简写，直接写两个独立属性，所有现代移动浏览器（Chrome for Android、Firefox iOS、Safari ≥14.0）都支持，且语义清晰、无歧义。
- 等距场景：
row-gap: 16px; column-gap: 16px; - 非对称场景（如卡片列表垂直紧凑、水平宽松）：
row-gap: 8px; column-gap: 24px; - 只想要列间距（比如横向滚动导航栏）：
row-gap: 0; column-gap: 12px; - 避免混用：
gap: 16px和row-gap: 8px同时出现时，后者会覆盖行间距，列间距却仍为 16px，视觉失衡
Flex 容器中 gap 生效的硬性前提
即使写了正确的 row-gap，如果父容器没满足 Flex 布局基础条件，gap 依然不会起作用。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 父元素必须有
display: flex或display: inline-flex，display: block下任何 gap 相关属性都无效 - 若需换行后仍有行间距（比如多行卡片），必须加
flex-wrap: wrap；否则row-gap不触发 - 子项不能设
flex-shrink: 0且内容过宽，否则容器被撑满，间隙被“压扁”不可见 - 不要用
display: contents包裹子项——它会让子项脱离渲染树，gap 失去作用对象
首尾留白和响应式断点怎么处理
gap 只管子项之间，不管容器边缘。移动端常见“左右贴边、中间等距”的需求，不能靠 gap 解决。
- 首尾留白必须用容器的
padding：例如padding: 0 16px;控制左右内边距 - 媒体查询中调整间距，优先改
row-gap/column-gap值，而不是切回 margin —— 否则逻辑割裂、维护成本飙升 - 若设计稿要求“第一组卡片 24px、第二组 8px”，别试图用
.group-1 > *:not(:last-child)加 margin，直接拆成两个独立容器，各自设不同 gap - 单位慎用
%：gap不支持百分比（Grid 中column-gap例外，但移动端表现不稳定，建议统一用px或rem）
真正难的不是让 gap 在 iOS 上显示出来，而是当产品经理说“这个列表在小屏上间隙减半、大屏上加图标间隔”时，得立刻意识到：gap 是容器级统一控制，差异化必须靠结构拆分或 JS 注入新 class，而不是在 CSS 里堆选择器 hack 子项。
