gap在safari 14.1–15.6中设了无效，根本原因是浏览器要求flex容器必须声明flex-wrap: wrap才解析gap，即使视觉上单行也需添加；否则gap被完全忽略。
gap在Flex容器中为什么设了却没效果？
直接写 display: flex; gap: 12px; 在 Safari 14.1–15.6 里大概率不生效——computed styles 中 gap 显示为 0px 或未计算，不是你漏写了单位，是浏览器根本没解析它。
关键原因：这些旧版 Safari 要求 Flex 容器必须启用换行才能识别 gap，哪怕你只想单行显示。
- 必须加
flex-wrap: wrap，否则gap形同虚设 - 不想真换行？给子项加
min-width: 0或明确宽度（如flex: 0 0 calc(33.333% - 8px)），配合justify-content: center实现视觉单行 - Chrome/Firefox 虽支持单行
gap，但统一加flex-wrap: wrap是最省心的跨浏览器写法
gap双值写法在Flex里到底怎么用？
写成 gap: 12px 8px 是安全且推荐的，第一值是 row-gap（主轴垂直方向间距），第二值是 column-gap（主轴水平方向间距）——和 flex-direction 无关，只由布局轴向决定。
常见误区：gap: 8px 0 并不是“禁用列间距”，而是把列间距真设成 0px，子项会紧贴在一起。
- 横向排列（
flex-direction: row）时：row-gap控制行间垂直距，column-gap控制元素间水平距 - 纵向排列（
flex-direction: column）时：row-gap还是控制“行”（即垂直方向）间距，column-gap控制水平方向间距 - 别混用
gap和row-gap：后者会覆盖前者对应方向的值，调试时容易误判
gap和margin一起用会出什么问题？
gap 是容器级控制，margin 是子项自身属性，两者不冲突但会叠加——空白不是替换，而是相加。
比如容器设了 gap: 10px，某个子项又写了 margin-right: 10px，那它右边实际空出 20px，而不是 10px。
- 用
justify-content: center时，给第一个子项加margin-left会让整行左偏，居中失效 - 卡片列表中个别卡片加了
margin-bottom做强调，结果和gap叠加，底部多出一倍空白 - 响应式断点里只调了
gap，忘了清掉之前写的margin，造成意外溢出 - 真要差异化留白，优先改子项
margin，并同步把对应方向的gap设为0
多列Flex下gap导致换行或溢出怎么办？
设了 gap: 16px 但子项还是挤成两行？大概率是子项宽度没动态扣除 gap 占用的空间。
例如三列布局，每个子项设 flex: 0 0 33%，加上两处 16px 间隙，总宽 = 3 × 33% + 2 × 16px > 100%，浏览器只能换行或压缩。
- 正确做法：用
calc()动态减去间隙，如flex: 0 0 calc((100% / 3) - 16px) - 注意：这里减的是完整
16px，不是一半——因为gap是列间距离，每项需预留一侧间隙空间 - 如果子项内容不定宽，用
flex: 1配合min-width更稳妥，避免calc()在小屏下失效
真正容易被忽略的是：gap 不影响容器边缘到首/末子项的距离，那部分得靠 padding 控制；而多行 Flex 中，row-gap 确实只作用于“行内相邻项”，跨行垂直距靠它，不是靠子项 margin ——这点查 computed styles 最直观。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
