使用 Flexbox 可实现按钮组自适应排列，通过设置父容器 display: flex、flex-wrap: wrap 和 gap 间距，结合 flex: 1 1 100px 控制子项伸缩，配合媒体查询在不同屏幕下调整最小宽度，如小屏设为 45% 或 100%，并利用 justify-content 与 align-items 优化对齐方式，使按钮组响应式均匀分布。
要实现按钮组的自适应排列，关键是让按钮在不同屏幕尺寸下自动换行并均匀分布。通过 CSS 的弹性布局（Flexbox）可以轻松实现这一效果，无需依赖浮动或定位。
使用 Flexbox 实现自适应按钮组
将父容器设置为 display: flex，并启用换行和对齐属性，子元素（按钮）会根据容器宽度自动排列。
示例代码：.button-group {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 按钮之间的间距 */
}
.button {
flex: 1 1 100px; / 最小宽度 100px，可伸缩 /
padding: 10px;
border: 1px solid #ccc;
background-color: #f5f5f5;
text-align: center;
cursor: pointer;
}
说明：- flex-wrap: wrap 允许按钮在空间不足时换行
- flex: 1 1 100px 表示按钮可伸缩，基础宽度 100px，最小宽度接近 100px
- gap 控制按钮之间的间距，比 margin 更易管理
控制响应式断点下的行为
如果希望在特定屏幕尺寸下调整按钮的最小宽度或排列方式，可以结合媒体查询优化体验。
@media (max-width: 600px) {
.button {
flex: 1 1 45%; /* 小屏下每行最多显示两个按钮 */
}
}
@media (max-width: 400px) {
.button {
flex: 1 1 100%; / 超小屏下每个按钮占满一行 /
}
}
对齐与间距优化
为了让按钮组看起来更整齐，可以设置主轴和交叉轴的对齐方式。
立即学习“前端免费学习笔记（深入）”；
.button-group {
justify-content: flex-start; /* 按钮左对齐 */
align-items: center; /* 垂直居中 */
}
提示：- 使用 justify-content: center 可居中整个按钮组
- 用 space-between 或 space-around 可均匀分布按钮，但需注意固定数量时的视觉平衡
基本上就这些，合理使用 flex 属性和响应式规则就能让按钮组在各种设备上自然排列。
