在css flex布局中，gap属性可直接设置子元素间间距；只需父容器设为display:flex并添加gap，支持px、%、fr等单位，自动适配flex-direction方向，换行后仍生效，且不与margin叠加。
flex容器里用gap统一控制间距最省事
只要父容器是display: flex或display: inline-flex，直接加gap就能生效，不用给每个子元素单独设margin。它自动适配flex-direction：横向排布时管水平间距，纵向时管垂直间距；换行后，行与行之间也照常有间隔。
常见错误是忘了加flex-wrap: wrap就指望gap在多行场景下起作用——其实gap本身不依赖换行，但没wrap的话所有子项挤在一行，根本看不到“行间距”效果。
-
gap: 12px：行列都用12px -
gap: 8px 16px：行间距8px，列间距16px（顺序是row-gap column-gap） - 单位支持
px、rem、%，但%按容器尺寸计算，窄屏下可能过小
想让子元素“等距分布”别只靠justify-content
justify-content: space-between和space-around看着像等距，实际不是真均分：前者首尾贴边、中间等距；后者首尾间距只有中间的一半。真正严格等距得用space-evenly——所有间隙（含首尾到容器边缘）完全相等。
但space-evenly在IE里完全不支持，Safari 12之前也不认。如果必须兼容老浏览器，要么用grid替代（display: grid; gap: 12px;），要么手动模拟：padding-left/padding-right设为期望间隙的一半，再配合justify-content: space-between。
容易被忽略的是：只要某个子元素设了flex-grow: 1或flex: 1，它就会抢占剩余空间，直接覆盖justify-content的间距逻辑——此时再调space-evenly也没用。
gap和margin混用时，间距会叠加
两者可以共存，但不是“互斥替代”，而是“叠加生效”。比如容器设了gap: 10px，某个子项又加了margin: 0 5px，那它左右相邻的间隙就是10px + 5px + 5px = 20px。
这种叠加在固定宽度容器里容易导致溢出，尤其当子项本身有width或flex-basis时。调试时建议打开浏览器的Flexbox可视化工具（Chrome DevTools里勾选“Show flexbox overlays”），一眼看出真实占用空间。
- 优先用
gap做全局统一间距，干净且无边界问题 - 个别子项需要额外偏移，再加
margin微调 - 避免全用
margin模拟gap，否则:last-child重置、负边距、折叠等问题会成倍增加
响应式卡片布局中gap比margin更稳
在flex-wrap: wrap的卡片流式布局里，gap天然适配换行，每行内部和行与行之间都保持一致间隔；而用margin就得处理最后一项的margin-right、换行后首项的margin-top等一堆边界逻辑。
结合flex: 1 1 calc(33.333% - 2 * 12px)（假设gap: 12px）能实现三列自适应，但要注意calc()里的减法必须精确匹配gap值，否则在小屏下可能因四舍五入导致最后一列掉行。
真正麻烦的不是写法本身，而是忘记gap只作用于直接子元素——如果卡片内部还有嵌套flex容器，它的gap不会穿透影响外层卡片间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
