gap比margin更可靠，因其是布局层原生控制，不参与盒模型计算、不触发重排、不影响justify-content或align-items对齐；而margin模拟易在动态增删或响应式时出错，且无法实现容器边缘留白。
gap 属性为什么比 margin 更可靠
因为 gap 是布局层原生控制，不参与盒模型计算，不会触发重排，也不影响 justify-content 或 align-items 的对齐逻辑；而用 margin 模拟等距（比如给每个子项加 margin-right 再用 :last-child 清除）容易在动态增删项、响应式断点切换时漏掉清除规则，导致末尾多出空白或对齐偏移。
常见错误现象：justify-content: space-between 在只有 2 个子项时看似正常，但加到 3 个以上就发现首尾紧贴容器、中间间隔变大——这不是你想要的“等距”，而是它的语义行为。
-
gap只作用于 flex item 之间，不作用于容器边缘，语义清晰 - 支持
row-gap和column-gap独立设置，响应式中可分别控制 -
gap在flex-wrap: wrap下同样作用于换行后的上下行之间 - IE 完全不支持
gap，如需兼容 IE11，必须降级为margin方案（无自动 fallback）
启用 gap 的最小必要配置
只需两步：声明 display: flex，再设置 gap 值。不需要额外包裹、伪元素或 JS 干预。
示例：
.list {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 横向纵向都生效 */
}
注意：gap 在 flex-direction: column 时控制的是垂直间距，在 row 时控制水平间距；若需不同方向不同值，改用 row-gap: 8px; column-gap: 16px。
- 单位支持
px、rem、%（百分比基于容器内联尺寸，慎用） - 设为
0或unset可关闭间隔，比批量重置margin干净得多 -
gap在单行 Flex 中只生效于主轴方向；未启用flex-wrap: wrap时，row-gap不生效
space-evenly 为什么经常“没反应”
不是语法错，而是布局条件没满足：space-evenly 要求容器有剩余空间且子元素参与 Flex 流程，否则无效。
最常见原因：
- 父容器缺失
display: flex（或被display: inline等覆盖） - 子元素写了
width: 100%、flex-basis: 100%或flex: 0 0 auto且内容撑满，导致主轴无剩余空间可分 - 子元素是
<span></span>、<a></a>这类 inline 元素，默认不参与 Flex 布局，需显式设display: block或display: flex - 设置了
flex-direction: column却误以为justify-content控制水平间距（此时它控制的是垂直方向）
space-evenly 在 flex-wrap: wrap 下只作用于当前行，不会跨行统一分配。结果就是第一行首尾留白 15px，第二行可能只剩 10px，视觉错位明显。
gap 和 space-evenly 的关键区别
gap 控制的是“item 之间”的固定距离，不管容器边缘；space-evenly 分配的是“所有间隙”（含首前、尾后、item 之间），依赖剩余空间均分，语义不同，不可混用。
- 如果你要的是“每两个相邻项之间严格等于 12px”，用
gap: 12px - 如果你要的是“首项前、项间、末项后全部等于 12px”，且能接受 IE 不支持，才选
justify-content: space-evenly -
gap和padding-inline组合最自然：padding-inline: 12px解决首尾留白，gap: 12px解决中间间距 - 同时写了
gap和row-gap/column-gap，后者会覆盖前者对应方向的值
真正麻烦的不是选哪个值，而是忘记子项自身的 flex-grow 正在悄悄撑满空间，让所有 justify-content 都失效——检查子项是否意外继承了 flex: 1 或显式设置了 flex-grow: 1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
