gap不能直接撑满容器宽度，它仅控制项目间空隙；需配合justify-content或calc()计算子项宽度才能实现左右贴边或均匀分布，且不可与margin混用。
gap 在 flex-wrap: wrap 下是否真能撑满容器宽度
不能直接撑满，gap 只控制项目之间的空隙，不调整项目自身宽度或对齐方式。如果你希望每行子项左右贴边、中间等距，仅靠 gap 不够，必须配合 justify-content 或额外计算子项宽度。
常见错误是设了 gap: 16px 后发现首项离左边缘、末项离右边缘也有 16px，误以为是 gap 导致的——其实那是你没重置 justify-content，默认值 flex-start 就是左对齐，留白天然存在。
- 想让子项“分散填充整行”，用
justify-content: space-between（首尾贴边，中间等距） - 想让子项“均匀分布且首尾也留半倍间隙”，用
justify-content: space-around，但注意它和gap叠加后视觉会变松散，慎用 - 真正要“每行都左右撑满 + 间隙均等”，得结合
calc()动态算子项宽度，例如：4 列布局下width: calc((100% - 3 * 16px) / 4)
row-gap 在单行 flex 容器里为什么没效果
row-gap 只在多行布局中起作用，前提是容器启用了 flex-wrap: wrap 且子项实际发生了换行。如果所有子项都在同一行内（哪怕容器宽度不够、子项被压缩），row-gap 依然不会渲染。
容易踩的坑是：写了 gap: 12px 24px 却发现垂直方向没间距，其实是第一个值（row-gap）被忽略了，因为容器没换行。
- 检查是否设置了
flex-wrap: wrap—— 没设就等于没启用多行能力 - 确认子项总宽度是否真的超出容器宽度 —— 布局工具如 Chrome DevTools 的 Layout 面板可验证是否换行
- 避免依赖
flex-direction: column时误判“行”：此时row-gap仍控制垂直方向（即“列之间”的上下间距），和方向无关
gap 和 margin 混用会导致哪些视觉错位
混用最典型的后果是：换行后某一行突然变高、最后一行右侧溢出、或响应式断点切换时间距跳变。这是因为 gap 是容器级逻辑，而 margin 是元素级偏移，两者叠加不抵消、不覆盖，而是直接相加。
比如给每个 .item 加了 margin-bottom: 8px，又在父容器设了 row-gap: 16px，那实际行间距就是 24px；更糟的是，如果某些 .item 还有 margin-right，column-gap 会额外再加一遍。
- 绝对不要在启用了
gap的 flex 容器子项上写margin，尤其避免:not(:last-child)类选择器 - 若需兼容老浏览器（如 Safari 14.0），降级方案应只用
margin，并确保和gap数值一致，避免双写 - 动态插入/删除子项时，
margin方案容易因选择器失效导致首尾空白残留，gap则完全免疫
怎样写 @supports 才不被旧浏览器静默忽略
很多开发者写 @supports (gap: 1rem) 包一层就完事，结果 Safari 14.0 下布局塌陷却无报错——因为旧版 Flex 引擎根本不识别 gap，只是跳过该声明，继续执行后续规则（比如没 fallback 的 margin），最终啥都没生效。
正确做法是主动探测“不支持”，然后提供确定的降级样式，而不是寄希望于新特性被识别。
- 用
@supports not (gap: 1rem)显式捕获不支持环境，并在里面写完整 fallback（如margin-right+margin-bottom+:not(:last-child)） - 不要把
gap和margin写在同一作用域，否则新浏览器会叠加，旧浏览器只执行margin - Safari 14.1+ 开始支持，但部分 iOS 14.5 设备仍有渲染 bug，建议加
flex-shrink: 0防止子项被意外压缩
gap 的核心价值不在“写起来少几行”，而在于它把“间距”从元素行为抽离成容器契约——只要容器定义了 gap，无论子项怎么增删、换行、响应式缩放，间距逻辑始终稳定。但这个契约成立的前提是：别让它和 margin 共存，也别指望它自动解决对齐问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
