gap是控制flex子元素间距最干净的方式，专为此设计，只作用于子元素之间，不干扰对齐或溢出；支持gap:12px 8px、row-gap/column-gap独立设置，IE不支持需降级为:not(:last-child) margin。
用 gap 直接控制 flex 子元素间距最干净
Flex 布局里想让子元素之间有空隙，别再用 margin 拼凑了——gap 是专为此设计的属性，浏览器原生支持，逻辑清晰，不会干扰对齐或溢出行为。
常见错误是给每个子项加 margin-right 或 margin-bottom，结果首尾多出空白、换行错位、响应式时塌陷，还容易和 justify-content 冲突。
实操建议：
-
gap可同时设置行列间距：gap: 12px 8px（行间距 12px，列间距 8px） - 只设一个值时，行列等距：
gap: 10px - 它不作用于容器边缘，只在子元素“之间”，天然规避首尾多余空白
- IE 完全不支持，如需兼容 IE，
gap必须降级为margin+ 伪类或 JS 补丁
当 gap 不可用时，用 margin 配合 :not(:last-child)
老项目要兼容 IE 或某些低版本 WebView，只能手动控制 margin。但直接写 margin-right: 12px 会让最后一个子项也带右边距，破坏布局。
实操建议：
- 横向排列用：
flex-item:not(:last-child) { margin-right: 12px; } - 纵向排列用：
flex-item:not(:last-child) { margin-bottom: 12px; } - 避免用
:first-child反向减边距——flex 顺序可能由order改变，:last-child更可靠 - 如果子元素动态增删，确保 CSS 选择器能实时匹配，不要依赖 JS 手动加 class
row-gap 和 column-gap 能更精细地控制方向
单方向需要不同间距时，比如卡片列表行距大、列距小，或者表单字段垂直紧凑但水平留白，gap 的简写不够直观，这时拆开写更稳妥。
实操建议：
-
row-gap: 24px只影响换行后的垂直间距，和flex-direction: column下的“行”概念无关，它始终指主轴垂直方向的间隙 -
column-gap: 8px同理，对应主轴水平方向的间隙 - 二者可单独使用，未声明的方向默认为
0，不会继承父级gap - 注意 Safari 旧版本（≤14.1）对
row-gap/column-gap在 flex 中的支持不完整，建议加gap回退
别忽略 flex-wrap: wrap 对 gap 的影响
gap 在单行 flex（flex-wrap: nowrap）下表现正常，但一旦换行，部分开发者发现“行与行之间没间隙”，其实是误解了 gap 的作用范围——它控制的是“相邻子项之间的间隙”，而换行后第一行末尾和第二行开头并非相邻 DOM 兄弟，它们之间没有 gap。
实操建议：
- 多行 flex 中，
gap确实只在同“行”内生效；跨行垂直间距靠row-gap控制，不是靠子项 margin - 如果用了
align-content: flex-start，多行会挤在顶部，row-gap依然存在，只是被视觉压缩了——检查 computed styles 里的row-gap值是否生效 - 极端情况（如子项高度不一），
row-gap仍按基线对齐区域计算，不是按视觉底部对齐，必要时改用align-items: stretch统一高度
实际项目里最容易被忽略的，是 gap 在嵌套 flex 容器中的层级关系——它不会穿透到孙子级，也不会被父级 gap 影响；还有就是 Safari 14.1 之前对 row-gap 的 flex 支持缺失，光看 CanIUse 的“flexbox”大类会误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
