用 flex-direction: column + justify-content: space-between 可实现垂直菜单按钮等距分布，但需容器设明确高度；更推荐 gap 属性，兼容现代浏览器且无需固定高度，配合语义化 nav/ul/li/a 结构提升可访问性。
垂直导航菜单里按钮间距不均？用 flex-direction: column + justify-content: space-between
只要容器有明确高度，justify-content: space-between 就能自动把首尾按钮顶到底、贴到顶，中间按钮等距分隔——这是最直接有效的解法。
常见错误是只写 display: flex 却漏掉 flex-direction: column，结果按钮还是横着排；或者没设 height，导致 space-between 没空间可分配，完全失效。
- 容器必须显式设置
height或min-height（比如height: 300px），否则 Flex 认为“没多余空间”，space-between退化为flex-start - 按钮本身不用设
margin，否则会干扰 Flex 的自动计算 - 如果按钮数量动态增减（如 JS 插入新项），确保容器高度足够容纳全部按钮，否则末项会被截断
- 避免在容器上同时加
padding和space-between，padding 会压缩可用空间，导致间距变小且不易预测
按钮数量少或不确定时，改用 gap 更稳妥
当只有 2–3 个按钮，或未来可能增删项，又不想硬编码容器高度，gap 是更灵活的选择。它不依赖总高度，只控制相邻项之间的固定间隔。
例如：.nav-container { display: flex; flex-direction: column; gap: 1.2rem; } —— 所有按钮上下间距统一为 1.2rem，首尾自然留空，不会贴边。
立即学习“前端免费学习笔记（深入）”；
-
gap在现代浏览器中兼容性良好（Chrome 84+、Firefox 63+、Safari 14.1+），IE 完全不支持，需另配 fallback - 搭配
align-items: center可让所有按钮水平居中，避免文字长度不同导致的左右错位 - 若需响应式间距，可用
gap-2 gap-md-3 gap-lg-4（Bootstrap 5.3+）或自定义媒体查询 - 不要混用
gap和margin-top：后者会让第一个按钮上方多出空白，破坏视觉节奏
用纯 CSS 实现语义化垂直菜单，别堆 div
按钮不是孤立元素——在导航场景下，它们本质是导航项。直接用 <nav><ul><li><a> 结构，比一堆 <div><button> 更可靠。
原因很简单：<a> 天然支持 href、SEO、键盘 tab 导航；<button> 若无 type="button" 或 JS 绑定，点一下可能意外提交表单或刷新页面。
- 结构推荐：
<nav><ul class="nav-list"><li><a href="/home">首页</a></li></ul></nav> - CSS 只需三行核心样式：
nav ul { list-style: none; margin: 0; padding: 0; }、nav li { display: block; }、nav a { display: block; padding: 12px 20px; } - 如果非要用
<button>（比如触发模态框），请包裹在<li>内，并加role="menuitem"和tabindex="0"补齐可访问性 - 别用
float或position: absolute模拟垂直排列——维护成本高，且与 Flex 布局冲突
Bootstrap 用户：d-flex + flex-column + gap-*
Bootstrap 5.3+ 提供开箱即用的工具类，比手写 CSS 更快，也更易响应式适配。
示例：<div class="d-flex flex-column gap-3"><button class="btn btn-link">首页</button><button class="btn btn-link">关于</button></div>
-
d-flex启用 Flex；flex-column切换方向；gap-3对应 1rem 间距（Bootstrap 默认 rem 基准为 16px） - 想让按钮撑满容器宽度？加
w-100；想居中？加align-items-center - 移动端需要更大间距？用
gap-2 gap-md-3 gap-lg-4，不同断点自动切换 - 注意：Bootstrap 的
gap类不支持 IE，如需兼容，得回退到自定义 CSS 或 JS 动态计算 margin
<button> 替代 <a> 时，往往忘了补全键盘导航和焦点管理——这两点一旦上线后才发现，调试成本远高于初期多写两行 CSS。 
