使用 Flexbox 结合 flex-wrap 和 gap 属性可轻松创建响应式按钮组。1. 将容器设为 display: flex 并启用 flex-wrap，实现自动换行；2. 使用 gap 统一间距，避免 margin 带来的布局问题；3. 设置按钮 flex: 1 1 150px 和 min-width，保证最小宽度下自适应伸缩；4. 在不同屏幕尺寸下，按钮自动从横向排列转为纵向堆叠，布局流畅，无需媒体查询或 JavaScript。
在现代网页设计中，响应式按钮组是常见需求。使用 Flexbox 可以轻松实现自动换行、间距控制和自适应排列。关键在于结合 flex-wrap 和 gap 属性，让按钮在不同屏幕尺寸下保持良好布局。
使用 Flexbox 创建基本按钮组
将容器设为 flex 布局，并启用换行，按钮就能在空间不足时自动折行。
.container {display: flex;
flex-wrap: wrap;
}
这样按钮会从左到右排列，超出容器宽度时自动换到下一行，无需媒体查询即可实现基础响应式效果。
用 gap 控制按钮间距
传统方法用 margin 控制间隔，但容易出现边缘多余空白。Flexbox 的 gap 属性能均匀分配项目间距，更简洁可靠。
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
flex-wrap: wrap;
gap: 10px;
}
gap 会自动在按钮之间添加水平和垂直间距，写一次就能同时处理行与列的间隔，代码更干净。
设置按钮的最小宽度和弹性
为了让按钮在小屏幕上合理换行，可设置 flex 属性控制其伸缩行为。
.button {flex: 1 1 200px;
min-width: 120px;
}
上述规则表示按钮默认最小宽度为 200px，空间充足时可伸展，空间不足则压缩到 120px 后换行。这样能平衡内容可读性和布局适应性。
完整示例：响应式按钮组
<div class="button-group"><button class="btn">保存</button>
<button class="btn">取消</button>
<button class="btn">导出 PDF</button>
<button class="btn">打印</button>
</div>
配合以下样式：
.button-group {display: flex;
flex-wrap: wrap;
gap: 12px;
}
.btn {
flex: 1 1 150px;
padding: 10px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
text-align: center;
}
在手机上，按钮会纵向堆叠；在桌面端，则横向分布，充分利用可用空间。
基本上就这些。用 flex-wrap 和 gap 搭配，再合理设置 flex 属性，就能做出自然流畅的响应式按钮组，不需要复杂计算或 JavaScript 干预。不复杂但容易忽略。
