使用 Flexbox 可高效实现弹性按钮布局。通过设置容器 display: flex，结合 gap 控制间距，可实现按钮水平或垂直排列；利用 flex: 1 使按钮等宽填满容器；添加 flex-wrap: wrap 支持响应式换行，适应不同屏幕尺寸，布局灵活且兼容性好。
要实现弹性按钮的排列布局，推荐使用 CSS 的 Flexbox（弹性盒子）布局模型。它能轻松控制元素在容器中的对齐、分布和响应式排列，特别适合按钮组的布局需求。
使用 Flexbox 实现水平弹性按钮排列
将一组按钮放在一个容器中，并通过 Flexbox 让它们均匀分布或对齐。
HTML 示例：
<div class="button-group">
<button>按钮 1</button>
<button>按钮 2</button>
<button>按钮 3</button>
</div>
CSS 样式：
.button-group {
display: flex;
gap: 10px; /* 按钮之间的间距 */
}
.button-group button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 4px;
}
这样按钮会水平排列，并保持一致的间距。
立即学习“前端免费学习笔记（深入）”；
让按钮等宽填充容器
如果希望所有按钮宽度相等并填满父容器，可以设置子项的 flex 属性。
.button-group {
display: flex;
gap: 8px;
}
.button-group button {
flex: 1; / 均匀分配可用空间 /
padding: 10px;
text-align: center;
}
此时每个按钮宽度自动均分容器空间，适合“确认/取消”类操作按钮。
垂直排列按钮
只需修改 flex-direction 即可实现垂直堆叠。
.button-group {
display: flex;
flex-direction: column;
gap: 10px;
width: 200px;
}
适用于侧边栏或菜单式按钮布局。
响应式换行排列
当按钮数量多时，允许换行显示。
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.button-group button {
flex: 1 1 120px; / 最小宽度约 120px，可增长收缩 /
}
在窄屏幕上自动换行，保持良好的可读性和点击区域。
基本上就这些。Flexbox 灵活且兼容性好，是现代布局的首选方式，处理按钮排列非常高效。不复杂但容易忽略细节，比如 gap 和 flex 的配合使用。
