gap必须配合flex-wrap: wrap才能稳定生效，否则safari 14.1–15.6等浏览器会忽略；它不参与子项盒模型计算，与margin叠加时优先级更高但二者共存，非替代关系。
直接用 gap，但必须配 flex-wrap: wrap 才能稳定生效——否则 Safari 14–15、部分安卓 WebView 会忽略它。
为什么 gap 设了却没效果？
不是写错了，是浏览器兼容逻辑卡在 flex-wrap 上：gap 在单行布局（flex-wrap: nowrap）下，Chrome/Firefox 支持，但 Safari 14.1–15.6 完全不认。只有加上 flex-wrap: wrap，所有现代浏览器（含 Safari 15.4+）才真正启用 gap 计算。
常见现象包括：
- Computed styles 里
gap显示为0px或未计算 - 子项紧贴在一起，像没设过
gap - 开发者工具里能看到属性声明，但 layout tab 没渲染出空隙
临时绕过换行需求？可以加 min-width: 100% 强制单行不折，gap 依然有效。
gap 和 margin 能不能混用？
能，但要清楚它们怎么叠加：gap 是容器级控制，不参与子项盒模型；margin 是子项自身属性，会触发重排、影响对齐基准线。两者共存时，gap 优先级更高，但 margin 不会被覆盖——而是“叠在 gap 外面”。
实操建议：
- 避免给所有子项统一加
margin-right：会导致末项多出右边距，破坏justify-content: center等对齐 - 如需不对称留白（比如只让某几个子项右移），优先用
margin，但同步调小gap值，防止双倍空白 - 横向布局慎用
margin-left：首项前无兄弟，加了等于整体左偏移
响应式下 gap 变了，子项宽度要不要调？
要，而且必须同步算。比如三列布局设了 gap: 10px，子项还写 flex: 0 0 33%，总宽就变成 3 × 33% + 2 × 10px > 100%，浏览器只能压缩或换行，gap 就“失效”了。
正确做法是用 calc() 动态扣除：
article { flex: 0 0 calc((100% / 3) - 10px); }
注意点：
- 列数变，分母跟着变；
gap值改，减数也得改 - 媒体查询里改了
gap，对应子项的calc()必须重写，不能只靠继承 - 如果子项用了
flex-grow: 1或minmax()，gap仍生效，但宽度不再可控——此时别硬撑 Flex，切display: grid更稳
IE 或老 WebView 怎么降级？
IE 完全不支持 gap，老安卓 WebView 常有渲染异常。降级方案不是“加个 margin 就完事”，而是成对处理：
- 子项加
margin-right: 12px和margin-bottom: 8px - 父容器加
margin-right: -12px和margin-bottom: -8px，抵消末列/末行溢出 - 用
:not(:last-child)替代:first-child清边距——order可能打乱 DOM 顺序，:last-child更可靠
别用 visibility: hidden 或 opacity: 0 模拟空位——它们仍参与 flex 项计数，伪元素补位也得满足 flex: 0 0 100% + display: block 这两个硬条件，否则 iOS Safari 15–16 会拉伸变形。
最易被忽略的点：gap 的语义和方向无关——column-gap 在 flex-direction: column 下仍是左右间距，不是上下；而多行 Flex 中，row-gap 控制的是换行后的垂直间隙，不是“行内高度”。这些细节不看规范，光凭直觉容易调错值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
