gap属性是解决Flex布局按钮间距不统一最直接可靠的方案，它专为容器内项目间隙设计，自动跳过首尾、避免margin折叠，支持响应式调整和flex-wrap换行间距，并具备良好的现代浏览器兼容性。
在 Flex 布局中，按钮间距不统一，本质是传统方式（如 margin）容易引发首尾冗余、响应式错位或父子 margin 折叠等问题。用 gap 属性是最直接、干净的解法——它专为容器内项目间隙设计，不干扰单个项目样式，也不受外边距合并影响。
gap 为什么比 margin 更可靠
gap 是 Flex（以及 Grid）容器的原生属性，只作用于容器内相邻项目之间，自动跳过首项前、末项后，不存在“多加一个 margin 导致整体偏移”的问题。它还能统一控制行与列间距（Flex 虽为一维，但 gap 仍支持 gap: 8px 12px 写法，不过横向间距生效，纵向在单行 Flex 中无视觉效果）。
- 无需给每个按钮加 class 或单独写
:first-child/:last-child重置 margin - 响应式切换时，只需改容器的
gap值，所有按钮间距同步变化 - 配合
flex-wrap: wrap时，gap同样适用于换行后的行间距（需注意浏览器兼容性）
基础用法：一行按钮等距排列
给按钮父容器设置 display: flex 和 gap 即可：
.btn-group {
display: flex;
gap: 12px; /* 水平间距 12px */
}此时无论按钮是 2 个还是 5 个，间距都严格一致，且首尾不留空隙。
立即学习“前端免费学习笔记（深入）”；
适配换行与响应式场景
当按钮数量多、需折行显示时，启用 flex-wrap 并搭配 gap：
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 行内间距 8px */
/* 注意：部分旧版 Safari 对 wrap 下 gap 支持不完整，可加 fallback */
}若需在小屏收紧间距，直接媒体查询调整：
@media (max-width: 768px) {
.btn-group {
gap: 6px;
}
}兼容性兜底建议（非必需但稳妥）
现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）对 Flex 下 gap 支持良好。如需兼容 Safari 13.x 或更早版本，可保留简单 margin 方案作为降级：
.btn-group {
display: flex;
gap: 12px;
}
<p>/<em> 兜底：仅在不支持 gap 的浏览器生效 </em>/
@supports not (gap: 12px) {
.btn-group > <em> + </em> {
margin-left: 12px;
}
}这样既用上新特性，又不影响老环境体验。
