justify-content: flex-start 使按钮左对齐但无间距，因它只控制容器与首/末子项间空白；子项间间隙需用 gap（需父容器 display: flex 且浏览器支持），或兼容写法 margin-left。
justify-content: flex-start 为什么按钮之间没间距
因为 justify-content 只控制主轴上“容器和第一个/最后一个子项”之间的空白，不负责子项彼此之间的间隙。flex-start 的作用只是把所有按钮挤到左侧（或顶部），它们紧挨着，gap 才管中间的空隙——但前提是容器是 display: flex 且浏览器支持 gap。
gap 在 flex 布局中生效的前提条件
gap 确实能在 flex 容器中用，但不是所有环境都行得通：
- Chrome 89+、Firefox 63+、Safari 14.1+ 支持 flex 下的
gap；旧版 Safari（如 13.x）会直接忽略它 - 容器必须是
display: flex或display: inline-flex，gap对block或grid外的布局无效 - 不能写在子元素上，必须写在父容器（即按钮的直接父级）的样式里
- 如果按钮用了
margin，gap和margin不叠加，但margin可能干扰对齐，建议清掉
示例正确写法：
.btn-group {
display: flex;
justify-content: flex-start;
gap: 8px;
}
<p>.btn-group > button {
margin: 0; /<em> 避免 margin 和 gap 混用出错 </em>/
}
兼容老浏览器时怎么模拟 gap 效果
当要支持 Safari 13 或 IE（虽然 IE 不支持 flex gap，但通常也不该用 flex 布局了），就得绕开 gap：
- 给除第一个按钮外的所有按钮加
margin-left（横向）或margin-top（纵向） - 用
:not(:first-child)选择器批量处理，比逐个写 class 干净 - 注意响应式场景下，如果按钮换行，
margin-top可能导致意外垂直间距，此时gap反而更稳
兼容写法示例：
.btn-group {
display: flex;
justify-content: flex-start;
}
.btn-group > button:not(:first-child) {
margin-left: 8px;
}
flex-start + gap 组合容易被忽略的细节
这个组合看着简单，实际调试时几个点常被跳过：
立即学习“前端免费学习笔记（深入）”；
-
gap值不能为负，设成gap: -4px会被浏览器静默丢弃 - 如果按钮设置了
flex: 1或width: 100%，gap仍存在，但可能被压缩得看不见——先检查是否子项尺寸失控 - 父容器有
padding时，justify-content: flex-start会让按钮贴左内边距，但gap只作用于按钮之间，不影响首尾到 padding 的距离 - 用
gap后再加justify-content: center，按钮组整体居中，但内部间距不变——别误以为gap会失效
真正卡住的时候，往往不是不会写，而是忘了查父容器 display 类型、忘了清 margin、或者正在调试的浏览器版本压根不认 gap
