display: flex + gap 是最稳、最易维护的按钮组排版方案，因它原生支持等距间隙、自动换行、垂直居中，且无 inline-block 的空白符间隙或 float 的清除浮动问题，现代浏览器兼容性良好。
用 display: flex + gap 是目前最稳、最易维护的按钮组自适应排版方案，其他方式要么有兼容性风险，要么在响应式断点处行为不可控。
为什么 inline-block 和 float 都该停用了
HTML 标签间的换行符会被渲染成约 4px 的空白间隙，inline-block 按钮之间总多出一截空隙，靠 font-size: 0 或负 margin 补救会破坏子元素继承链，尤其影响图标字体和 em 单位计算；float 则需额外清除浮动，且无法原生支持垂直居中或等高对齐。现代浏览器已全面支持 Flexbox，没必要再为旧方案兜底。
flex 布局下按钮宽度怎么控制才合理
按钮是否等宽，取决于内容语义和交互意图：
- 想让所有按钮宽度一致（比如“确认/取消”），给按钮加
flex: 1，但必须配合父容器设width或明确约束（如max-width: 600px），否则在窄屏下可能被压扁 - 想按内容自适应（比如导航栏里“首页”“关于我们”文字长度差异大），就不要设
flex，只靠gap控制间距，按钮自然收缩包裹文字 - 若按钮内含图标+文字，建议用
gap: 8px替代margin，避免最后一项多出空隙
小屏下按钮堆叠还是换行？关键看 flex-wrap 和 min-width
默认 flex-wrap: nowrap 会导致按钮横向溢出，必须显式加 flex-wrap: wrap 才允许换行。但光这样还不够：
立即学习“前端免费学习笔记（深入）”；
- 不设
min-width，小屏下按钮会被无限压缩，文字挤成两行甚至截断 - 推荐写法：
button { flex: 0 1 calc(50% - 8px); }（两列布局），或min-width: 120px（单列优先） - 避免用
white-space: nowrap强制不换行，这会引发横向滚动，尤其在 iOS Safari 下体验极差
下拉菜单混入按钮组时容易崩，怎么稳住
纯按钮横排没问题，但一旦插入 <div class="dropdown"> 这类块级容器，Flex 主轴就会被撑乱：
- 把下拉触发按钮和它的菜单容器放在同一级 DOM 中，不要让菜单脱离按钮组结构
- 给下拉容器本身也设
display: inline-flex或至少display: flex，让它参与同一根主轴 - 菜单弹出层（
.dropdown-menu）必须用position: absolute脱离文档流，否则会撑高整个 Flex 容器 - 别在按钮组上设
overflow: hidden，否则绝对定位的菜单可能被裁掉
真正难的不是写出那几行 CSS，而是判断「这个按钮组到底要不要换行」——比如表单底部的「上一步/下一步」，强制单列反而增加操作成本；而工具栏里的功能按钮，堆成一列又会让用户滑动半天。得结合真实设备测试，而不是只盯着媒体查询数值。
