Chrome 84+ 原生支持 gap，旧版静默忽略；验证方法：Styles 面板 gap 灰色/删除线、Computed 中为空或 not supported、getComputedStyle(el).gap 返回 '' 或 'normal'；可用负 margin + padding 模拟，需注意子项 min-width: 0、box-sizing: border-box 及换行间隙叠加问题。
Chrome 84+ 才原生支持 gap，低于该版本（如 Chrome 83 及更早）会静默忽略——不是 bug，是规范未实现。
怎么确认是不是 Chrome 版本太低导致 gap 失效
别靠猜，直接验证：
- 打开 DevTools → 选中设置了
display: flex和gap的容器 → Styles 面板里gap显示灰色或带删除线，基本就是不识别 - 切到 Computed 面板搜
gap，值为空或标着not supported - 控制台运行
getComputedStyle(el).gap，返回''或'normal'同样说明未生效
用负 margin + padding 模拟 gap 的实操写法
原理是“容器外扩，子项内缩”，视觉间隙不变，布局流不受扰：
- 设
gap: 16px→ 容器加margin: -8px，每个子项加padding: 8px - 仅需水平间隙：容器
margin-left: -8px; margin-right: -8px，子项padding-left: 8px; padding-right: 8px - 子项必须是直接子元素，且不能自带干扰性
margin（否则要重置） - 务必加
box-sizing: border-box，否则padding+border会撑破容器宽度
flex-wrap 换行后首行/首列多出一倍间隙怎么办
这不是错，是负 margin 和 padding 在换行时自然叠加的结果：
立即学习“前端免费学习笔记（深入）”；
- 水平布局（
flex-direction: row; flex-wrap: wrap）：假设每行 3 个，用.container > *:nth-child(3n+1) { padding-left: 0; } - 垂直布局（
flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1) { padding-top: 0; } - 子项若有
display: none，它的padding仍占位——得用 JS 移除 class，或改用visibility: hidden+position: absolute
真正容易被忽略的点：子项没加 min-width: 0
Flex 子项默认 min-width: auto，内容稍长就撑破容器；加上 padding 后更容易溢出。这个值几乎从不被主动写，但一旦漏掉，在 Chrome 83 这类旧环境里，负 margin 方案就会立刻暴露布局崩坏。
