Flex布局实现按钮组对齐需设容器display: flex，用justify-content控制主轴分布（如center、flex-end等），推荐用gap代替margin，配合align-items可垂直居中。

用 Flex 布局实现按钮组对齐，核心是把容器设为 display: flex，再用 justify-content 控制按钮在主轴（默认水平）上的整体分布方式。

设置容器为 Flex 并指定主轴对齐

给按钮的父容器（比如 <div class="btn-group">）添加以下样式： <ul> <li> <code>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

如果按钮组需要在容器内垂直居中（比如放在卡片底部），可加：

立即学习“前端免费学习笔记（深入）”；

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• align-items: center —— 单行按钮垂直居中
• height 或 min-height 在父容器上设定，确保有可用空间
• 多行按钮用 flex-wrap: wrap + align-content 控制行间对齐

一个实用示例

HTML：

  取消
  确定

CSS：

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

这样按钮靠右排列，间距统一，响应自然，无需额外 hack。