flex gap 是解决多行元素间距不一致的最可靠方案，专为 flex 容器设计，自动处理换行、对齐与响应式场景，支持 gap: row column 语法，需父容器设 display: flex 且兼容现代浏览器。
多行元素间距不一致，通常是因为用了 margin 或 padding 手动控制，结果在换行、响应式或不同容器宽度下出现错位或间隙偏差。用 flex gap 是最干净、最可靠的解法——它专为 flex 容器内项目间的统一间距而设计，自动处理换行、对齐和响应式场景。
gap 能解决哪些典型问题
以下情况用 gap 比 margin 更稳：
- 多行 flex 项目（如卡片列表、按钮组）中，第二行开头和第一行末尾的垂直/水平间距不一致
- 使用
justify-content: space-between时，首尾项贴边，中间间隙过大，但又不想手动算 margin - 媒体查询切换布局时，margin 需重复写多套，而 gap 只需改一个值
- 文字换行或 inline-flex 中子元素因基线对齐导致的“看似不齐”问题（gap 不受基线影响）
正确启用 flex gap 的写法
确保父容器是 flex 布局，并直接设置 gap（支持水平 column-gap 和垂直 row-gap，也可合并为 gap: row column）：
✅ 正确示例：
.container { display: flex; flex-wrap: wrap; gap: 12px; /* 同时控制行内和行间间距 */ }注意：gap 只作用于 flex（和 grid）容器，对 block 或 inline 元素无效；也不继承，必须设在父容器上。
兼容性与降级方案
现代浏览器（chrome 84+、firefox 63+、safari 14.1+、edge 84+）原生支持 gap。如需兼容老版本 Safari（
- 用
@supports (gap: 0)包裹 gap 声明，避免旧浏览器解析错误 - 对不支持的环境，保留 margin 方案（如给子项设
margin-right和margin-bottom），再用:last-child或:nth-child(n)清除末尾冗余 margin - 工具如 Autoprefixer 目前不为 gap 加前缀，无需额外配置
常见误区提醒
避免这些操作让 gap 失效或表现异常：
- 在子项上同时设 margin 和 gap：gap 会叠加 margin，造成双倍间距
- 父容器设了
align-items: stretch但子项有固定高度，导致 gap 在垂直方向“看不见”（实际存在，只是被内容撑满） - 用
flex-direction: column时误以为 gap 是“上下间距”，其实gap: 12px就是相邻项之间的统一间隔，无论方向