Flex 布局实现按钮组对齐需设容器 display: flex，用 justify-content 控制主轴分布（如 center、flex-end 等），推荐用 gap 代替 margin，配合 align-items 可垂直居中。
用 Flex 布局实现按钮组对齐，核心是把容器设为 display: flex，再用 justify-content 控制按钮在主轴（默认水平）上的整体分布方式。
设置容器为 Flex 并指定主轴对齐
给按钮的父容器（比如
）添加以下样式：
-
display: flex—— 启用 Flex 布局 -
justify-content: center—— 按钮组居中对齐（常用） -
justify-content: flex-start—— 靠左对齐（默认值） -
justify-content: flex-end—— 靠右对齐 -
justify-content: space-between—— 首尾贴边，中间等距 -
justify-content: space-around—— 每个按钮周围留等宽间隙 -
justify-content: space-evenly—— 按钮之间及边缘间距完全相等
注意按钮本身别设 width 或 margin 干扰对齐
如果单个按钮设置了固定宽度或左右 margin，可能破坏 justify-content 的预期效果。建议：
- 让按钮保持内容宽度（不设
width），或统一用flex: 0 0 auto - 避免对按钮加
margin-left/right，如需间距优先用gap（更简洁可靠） - 若必须用 margin，推荐只对除第一个外的按钮加
margin-left，避免首尾多出空白
补充：垂直居中 可用 align-items
如果按钮组需要在容器内垂直居中（比如放在卡片底部），可加：
立即学习 “ 前端免费学习笔记（深入）”；
-
align-items: center—— 单行按钮垂直居中 -
height或min-height在父容器上设定，确保有可用空间 - 多行按钮用
flex-wrap: wrap+align-content控制行间对齐
一个实用示例
HTML：
CSS：
.btn-group {
display: flex;
justify-content: flex-end;
gap: 8px;
}
这样按钮靠右 排列，间距统一，响应自然，无需额外 hack。
