使用Flex布局可高效构建响应式按钮组，通过display: flex结合gap、justify-content等属性控制排列与对齐，支持换行适配移动端；统一按钮样式、状态反馈及尺寸类，提升交互一致性，无需框架即可实现美观易维护的UI组件。
在现代网页开发中，按钮组是常见UI组件，用于将多个相关操作集中展示。通过CSS中的Flex布局与Button元素结合，可以轻松实现美观、响应式的按钮组。无需依赖复杂框架，原生CSS Flex就能满足大多数需求。
使用Flex布局构建基础按钮组
Flex布局天然适合处理一维排列的UI结构，按钮组正是典型场景。将容器设为display: flex，子元素（按钮）会自动沿主轴排列。
基本结构如下：
.btn-group {
display: flex;
gap: 4px; /* 按钮间留白 */
}
<p>.btn {
padding: 8px 16px;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
}
HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="btn-group"> <button class="btn">上一页</button> <button class="btn">下一页</button> </div>
控制对齐方式与响应式表现
Flex提供了多种对齐方式，可根据设计需求调整按钮组位置。例如居中显示：
- justify-content: center：让按钮组水平居中
- justify-content: space-between：两端对齐，适合分页控件
- flex-wrap: wrap：允许换行，适配小屏幕
移动端适配建议设置容器最大宽度，并启用换行：
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: 300px;
}
统一按钮样式与状态反馈
保持视觉一致性很重要。统一设置边框、圆角、字体和悬停效果：
.btn {
border-radius: 4px;
font-size: 14px;
transition: background 0.2s;
}
<p>.btn:hover {
background: #f0f0f0;
}</p><p>.btn:active {
background: #e0e0e0;
}
若需突出某个按钮（如“确认”），可单独添加类：
.btn-primary {
background: #1976d2;
color: white;
border-color: #1976d2;
}
处理不同尺寸与禁用状态
支持小型或大型按钮时，可通过类控制尺寸：
.btn-small {
padding: 4px 8px;
font-size: 12px;
}
禁用按钮应去除交互样式：
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
HTML中使用disabled属性即可生效。
基本上就这些。用Flex布局管理按钮组，结构清晰，维护简单，兼容性好，适合大多数项目场景。不复杂但容易忽略细节，比如间隙控制和状态样式统一。
