Chrome 84+ 原生支持 gap，旧版静默忽略；验证方法：Styles 面板 gap 灰色/删除线、Computed 中为空或 not supported、getComputedStyle(el).gap 返回 '' 或 'normal'；可用负 margin + padding 模拟，需注意子项 min-width: 0、box-sizing: border-box 及换行间隙叠加问题。
Chrome 84+ 才原生支持，低于该版本（如 Chrome 83 及更早）会静默忽略——不是 bug，是规范未实现。
怎么确认是不是 Chrome 版本太低导致
失效
别靠猜，直接验证：
打开 DevTools → 选中设置了
和
的容器 → Styles 面板里
显示灰色或带删除线，基本就是不识别
切到 Computed 面板搜
，值为空或标着
控制台运行
，返回
或
同样说明未生效
用负 margin + padding 模拟
的实操写法
原理是“容器外扩，子项内缩”，视觉间隙不变，布局流不受扰：
设
→ 容器加
，每个子项加
仅需水平间隙：容器
，子项
子项必须是直接子元素，且不能自带干扰性
（否则要重置）
务必加
，否则
+
会撑破容器宽度
换行后首行/首列多出一倍间隙怎么办
这不是错，是负 margin 和 padding 在换行时自然叠加的结果：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
水平布局（
）：假设每行 3 个，用
垂直布局（
）：用
子项若有
，它的
仍占位——得用 JS 移除 class，或改用
+
真正容易被忽略的点：子项没加
Flex 子项默认
，内容稍长就撑破容器；加上
后更容易溢出。这个值几乎从不被主动写，但一旦漏掉，在 Chrome 83 这类旧环境里，负 margin 方案就会立刻暴露布局崩坏。
gapgapdisplay: flexgapgapgapnot supportedgetComputedStyle(el).gap'''normal'gapgap: 16pxmargin: -8pxpadding: 8pxmargin-left: -8px; margin-right: -8pxpadding-left: 8px; padding-right: 8pxmarginbox-sizing: border-boxpaddingborderflex-wrapflex-direction: row; flex-wrap: wrap.container > *:nth-child(3n+1) { padding-left: 0; }flex-direction: column; flex-wrap: wrap:nth-child(2n+1) { padding-top: 0; }display: nonepaddingvisibility: hiddenposition: absolutemin-width: 0min-width: autopadding