HTML移动端gap间距布局的兼容教程-html教程-PHP中文网

Safari 14.0 及更早版本不支持 gap 简写（含单值和双值），必须拆分为 row-gap 和 column-gap 才能生效；其根本原因是规范实现差异，而非写法错误，该版本静默忽略 gap 声明，DevTools Computed 面板中无值。

html移动端gap间距布局的兼容教程

移动端用 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）