使用 flex-wrap: wrap 和 justify-content: space-between 可创建响应式按钮组，通过弹性布局实现换行与等间距分布，结合 min-width 与 gap 确保美观自适应，适用于多场景按钮排列。
在CSS中制作响应式按钮组，利用 flex-wrap: wrap 和 justify-content: space-between 可以实现既美观又自适应不同屏幕尺寸的布局。下面介绍如何正确使用这两个属性来构建一个灵活的按钮组。
1. 使用 Flex 容器设置基本结构
将按钮的父容器设为 Flex 布局，并启用换行功能，确保在空间不足时按钮能自动折行显示。
- display: flex; —— 启用弹性布局
- flex-wrap: wrap; —— 允许子元素换行
这样，当屏幕变窄时，按钮不会被挤压，而是自动排列到下一行。
2. 按钮等间距分布 justify-content: space-between
如果希望每行的按钮之间保持均匀间隔，可使用：
立即学习“前端免费学习笔记（深入）”；
- justify-content: space-between; —— 使首尾按钮贴边，中间间距相等
注意：该效果在单行且按钮数量较多时表现良好。但如果某行只有一个或两个按钮，可能看起来不够对称。此时可结合设置按钮的最小宽度，控制每行显示数量。
3. 配合响应式断点优化体验
为了让按钮组在不同设备上更协调，可以给按钮设置百分比宽度或 min-width，配合媒体查询调整布局。
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
}
.btn {
flex: 1 1 140px; / 最小宽度约140px，允许扩展 /
text-align: center;
}
使用 flex: 1 1 140px 让按钮在空间充足时均分宽度，空间不足时自动换行。gap 属性增加按钮之间的空隙，提升可读性。
4. 实际应用场景示例
适用于筛选标签、操作工具栏、多选项按钮组等需要响应式排列的场景。例如移动端表单底部的“取消”和“提交”按钮，在小屏幕上垂直排列，在大屏幕上并排居于两侧。
基本上就这些。合理组合 flex-wrap 与 justify-content，再辅以适当的宽度控制，就能做出自然流畅的响应式按钮组。不复杂但容易忽略细节。
