使用 Flexbox 实现响应式按钮自动换行，通过 display: flex、flex-wrap: wrap 和 flex: 1 1 200px 控制按钮弹性布局与最小宽度，结合 gap 设置间距，并在媒体查询中调整小屏下的最小宽度和间隙，确保在不同设备上均能良好显示。
要实现 CSS 响应式按钮排列并自动换行，关键是使用弹性布局（Flexbox）或网格布局（Grid），结合响应式断点控制按钮的排列方式。以下是一个实用且简洁的实现方法。
使用 Flexbox 实现自动换行
通过 display: flex 和 flex-wrap: wrap，可以让按钮在容器宽度不足时自动换行。
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 按钮之间的间距 */
padding: 10px;
}
.button {
flex: 1 1 200px; / 最小宽度约 200px，可伸缩 /
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
text-align: center;
white-space: nowrap;
}
说明：
- flex-wrap: wrap 允许子元素换行。
- flex: 1 1 200px 表示每个按钮最小宽度为 200px，空间足够时可扩展。
- gap 设置按钮之间的间距，兼容现代浏览器。
添加响应式断点优化显示
在小屏幕上进一步控制按钮行为，比如设置更小的最小宽度或调整间距。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 600px) {
.container {
gap: 8px;
}
.button {
flex: 1 1 140px; /* 小屏下最小宽度变小 */
}
}
这样在手机等小设备上也能良好显示，避免按钮过宽或换行不合理。
HTML 结构示例
基本上就这些。用 Flexbox 配合 min-width 控制和媒体查询，就能实现自然、美观的响应式按钮换行布局。
