用Flex实现垂直均分带间距按钮组，关键为设父容器flex-direction: column、gap控制间距、配合padding或flex: 1实现首尾留白均分；需避免margin叠加、height与flex冲突及容器高度未定义问题。
用 Flex 布局实现垂直方向均分且带间距的按钮组，关键在于把父容器设为 column 方向的弹性容器，并用 gap 控制间距、justify-content: space-between 或 flex: 1 实现均分效果。注意：space-between 在单列垂直布局中表现稳定，但只在子项数量 ≥2 时才真正“拉开”；若要更可控的均分（包括首尾留白），优先用 gap + flex: 1。
设置垂直主轴并启用 gap
给按钮的直接父容器添加：
- display: flex 启用弹性布局
- flex-direction: column 切换主轴为垂直方向
- gap: 12px（或任意值）统一控制按钮之间的垂直间距
- 可选：padding: 12px 给容器加内边距，让首尾按钮不贴边
让按钮在垂直方向上视觉均分（首尾有留白）
如果希望按钮从顶部到底部均匀分布、且首尾与容器边缘等距，推荐以下两种方式之一：
-
方案一（推荐）：用 gap + padding
保持按钮自身不伸缩（如固定高或自然高），仅靠 gap 和容器 padding 营造均分感。简单可靠，兼容性好 -
方案二：每个按钮设 flex: 1
配合容器 height（比如 100% 或具体像素值），让所有按钮等高撑满容器。适合高度固定、按钮数量已知的场景
避免常见错位问题
垂直排列时容易忽略的细节：
- 确认按钮没有意外的 margin-top / margin-bottom —— 它们会和 gap 叠加，造成间距翻倍
- 不要混用 height: 100% 和 flex: 1，否则可能触发高度计算冲突
- 如果容器高度未设定（如 height: auto），justify-content: space-between 不会产生拉开效果，因为“可用空间”等于内容总高
- 旧版 Safari 需加 -webkit-gap 前缀（但 Safari 14.1+ 已原生支持，2026 年基本无需考虑）
不复杂但容易忽略。核心就三点：column、gap、容器高度或 padding 配合得当。
