gap属性可统一控制flex子元素间距，比margin更干净可控；支持行列间距设置、自动适配换行、无首尾空白问题，现代浏览器广泛支持。
直接给父容器设置 gap 属性就能统一控制 flex 子元素之间的间距，比用 margin 更干净、更可控。
gap 适用于 flex 布局
Flex 容器启用 display: flex 后，只要不是单行且无换行（即 flex-wrap: nowrap 且所有子项能排下），gap 就能生效。注意：旧版 Safari 需加 -webkit-gap 兼容。
- 横向间距用 gap 或 column-gap
- 纵向间距用 row-gap
- 同时设行列间距可写成 gap: 12px 8px（行距 列距）
避免 margin 带来的额外问题
用 margin 给每个子项加间距容易导致首尾多出空白，或在换行时出现不一致的间隙。gap 是容器级控制，只作用于项目之间，不会影响容器边缘。
- 不用再写 :first-child / :last-child 去抵消 margin
- flex-wrap 换行时，gap 自动应用在行与行、列与列之间
- 响应式中改 gap 值，所有间距同步变化，维护成本低
兼容性小提醒
现代浏览器（Chrome 84+、Firefox 63+、Edge 16+、Safari 14.1+）都支持 flex gap。若需支持 Safari 13.1 或更早，可加前缀：
立即学习“前端免费学习笔记（深入）”；
```css.container {
display: flex;
-webkit-gap: 12px;
gap: 12px;
}
```
基本上就这些。gap 是 flex 布局中控制子项间距最推荐的方式，简洁、可靠、语义清晰。
