Flexbox 中 gap 不生效的常见原因是旧版 Safari 等浏览器不支持 flex 容器上的 gap 属性。
Flexbox 中 gap 不生效的常见原因
不是所有浏览器都支持 flex 容器上的 gap 属性——尤其是旧版 Safari（gap: 12px，也可能完全被忽略，子元素紧贴排列。这不是代码写错了，而是 CSS 规范支持度问题。
用 margin 模拟 gap 的核心思路
本质是给每个子元素设置外边距，但必须避免首项/末项多出空白，或相邻项之间间距翻倍。最稳妥的做法是只给「非首项」加 margin-left（水平布局）或「非首项」加 margin-top（垂直布局）。
- 水平
flex-direction: row：对除第一个子元素外的所有项加margin-left - 垂直
flex-direction: column：对除第一个子元素外的所有项加margin-top - 避免用
:not(:first-child)在低版本 Android 或旧 Safari 上失效，改用:nth-child(n+2)更兼容
margin 替代方案的实操写法
假设容器为 .flex-row，子项为 .item，期望间隙为 12px：
.flex-row {
display: flex;
}
.flex-row .item {
margin-left: 12px;
}
.flex-row .item:nth-child(1) {
margin-left: 0;
}
如果子项数量不确定、且需响应式调整，可配合 CSS 自定义属性：
立即学习“前端免费学习笔记（深入）”；
:root {
--gap: 12px;
}
.flex-row .item {
margin-left: var(--gap);
}
.flex-row .item:nth-child(1) {
margin-left: 0;
}
注意：不要用 margin-right + :last-child，因为 Flex 容器可能换行，last-child 不一定在末尾视觉位置。
容易被忽略的边界情况
当 Flex 容器设了 justify-content: center 或 space-between 时，直接加 margin 会破坏对齐逻辑——此时应改用嵌套 wrapper 或伪元素占位。更稳妥的兜底方式其实是用 display: grid 替代，只要目标环境支持 grid-gap（比 flex-gap 兼容早一代）。但若必须用 Flex，就只能接受手动控制首末项的 margin 归零，没有自动化的“完美替代”。
