使用CSS Flex实现按钮组水平分布需将父容器设为display: flex，通过gap设置间距，flex: 1使按钮等宽排列。可选justify-content控制对齐方式，如space-between或center，并用min-width保证响应式下按钮最小宽度，布局简洁且兼容性好。
要使用 CSS Flex 实现按钮组的水平分布，关键是将父容器设置为弹性布局（display: flex），然后控制子元素（按钮）的排列方式和间距。下面是具体实现方法。
1. 基础结构：HTML 按钮组
先创建一组按钮，通常用 <div> 包裹多个 <button> 元素：
<div class="button-group"><button>按钮 1</button>
<button>按钮 2</button>
<button>按钮 3</button>
<button>按钮 4</button>
</div>
2. 使用 Flex 布局实现水平分布
给父容器添加 Flex 样式，让按钮在一行内均匀排列：
.button-group {display: flex;
gap: 8px; /* 按钮之间的间距 */
}
button {
flex: 1; /* 让每个按钮平分容器宽度 */
padding: 10px;
border: 1px solid #ccc;
background-color: #f5f5f5;
color: #333;
border-radius: 4px;
cursor: pointer;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex 启用弹性布局，子元素自动横向排列
- gap 控制按钮之间的空隙，比 margin 更方便
- flex: 1 让所有按钮等宽并填满容器
3. 可选样式：对齐与换行控制
如果按钮较多，可以防止换行或居中对齐：
.button-group {display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center;
flex-wrap: nowrap; /* 不换行（默认）*/
width: 100%;
}
可替换 justify-content 的值来调整分布方式：
- space-between：首尾贴边，中间均分空隙
- space-around：每个按钮周围有相等空间
- center：整体居中排列，按钮之间 gap 相同
4. 响应式考虑
在小屏幕上，可设置最小按钮宽度避免过挤：
button {flex: 1;
min-width: 80px; /* 防止按钮太窄 */
}
基本上就这些。使用 Flex 制作按钮组水平分布简单又灵活，兼容性好，适合大多数现代浏览器场景。关键在于父容器设为 flex，再合理使用 gap 和 flex 属性控制布局。不复杂但容易忽略细节，比如 gap 替代 margin 更干净。
