Flex布局实现按钮组对齐需设容器display: flex，用justify-content控制主轴分布（如center、flex-end等），推荐用gap代替margin，配合align-items可垂直居中。
用 Flex 布局实现按钮组对齐，核心是把容器设为 display: flex，再用 justify-content 控制按钮在主轴（默认水平）上的整体分布方式。
设置容器为 Flex 并指定主轴对齐
给按钮的父容器（比如 如果单个按钮设置了固定宽度或左右 margin，可能破坏 如果按钮组需要在容器内垂直居中（比如放在卡片底部），可加： 立即学习“前端免费学习笔记（深入）”； HTML： CSS： 这样按钮靠右排列，间距统一，响应自然，无需额外 hack。
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 干扰对齐
justify-content 的预期效果。建议：
width），或统一用 flex: 0 0 auto
margin-left/right，如需间距优先用 gap（更简洁可靠）margin-left，避免首尾多出空白补充：垂直居中可用 align-items
align-items: center —— 单行按钮垂直居中height 或 min-height 在父容器上设定，确保有可用空间flex-wrap: wrap + align-content 控制行间对齐一个实用示例
display: flex;
justify-content: flex-end;
gap: 8px;
}
