gap是容器级间隙，不计入子项盒模型，不影响width计算但减少实际布局空间；它插入相邻子项间（含首尾），不参与flex-basis分配，且不可被JS单独读取。
不计入——gap 是盒模型外部的间距，它不会增加 flex-container 的总宽度，也不会减少子项的 width 计算值，但会影响子项实际可渲染的布局空间。
gap 在 Flexbox 中的实际作用位置
gap 插入在相邻 flex 项之间（包括首尾项与容器边缘之间，仅当使用 place-content 或 justify-content/align-content 配合时才影响外边距逻辑），但它不属于任何 flex 项的盒模型，也不触发 box-sizing 行为。它本质是容器级的“间隙生成器”，类似表格的 border-spacing。
-
gap不会出现在getComputedStyle(el).width或el.offsetWidth中 - Flex 子项的
width: 100px仍解析为 100px，但它们之间多出gap: 12px的空白 - 容器总宽度 = 所有子项宽度之和 + 所有 gap 宽度之和 + 容器自身 padding/border
容易误判的场景：gap 和 margin 混用
当 flex 项自己设置了 margin，再叠加 gap，视觉间距会叠加，但计算逻辑完全不同：
-
gap是容器属性，统一控制所有间隙；margin是子项样式，可能被折叠（如垂直方向）或受margin-collapse影响（Flex 中 margin 不折叠，但易混淆） - 如果子项写了
margin-right: 8px且容器设了gap: 12px，相邻两项间实际空隙是 8px + 12px + 8px = 28px（左右 margin 各占一边） - 这种叠加常导致响应式断点错位，尤其在
flex-wrap: wrap下，gap 会出现在换行后的首项前，而 margin 不会
兼容性与 fallback 处理要点
gap 在现代 Flexbox 中支持良好（Chrome 84+/Firefox 63+/Safari 14.1+），但旧版 Safari（≤14.0）和 IE 完全不支持。注意：
- 不要用
gap替代margin做关键对齐——它不可继承、无法用 JS 动态读取单个间隙值（只能读getComputedStyle(container).gap） - fallback 方案建议用
margin+:not(:last-child)，例如：.item:not(:last-child) { margin-right: 12px; }，但需注意 wrap 场景下最后一行末尾项的 margin 可能溢出 - 若用
display: grid替代 Flex 实现等距布局，gap行为一致，且 grid 对 gap 的支持更早、更稳定
真正要注意的是：gap 不参与 flex 项的 flex-basis 分配计算，但它会挤压剩余空间——比如 flex: 1 的项，在 gap 存在时可用宽度 = 容器宽 − 固定子项宽 − 所有 gap 宽，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
