Flexbox 子项在垂直方向上未均匀分布，通常源于 display: flexbox 这一非法声明（正确值应为 flex），导致 Flex 上下文未生效；修复后配合 justify-content: space-between 可实现等距垂直布局。
flexbox 子项在垂直方向上未均匀分布，通常源于 `display: flexbox` 这一非法声明（正确值应为 `flex`），导致 flex 上下文未生效；修复后配合 `justify-content: space-between` 可实现等距垂直布局。
在使用 Flexbox 实现右侧导航按钮垂直居中或等距分布时，一个极易被忽略却影响全局布局的错误是：将 display: flex 误写为 display: flexbox。CSS 规范中并不存在 flexbox 这一显示类型值，浏览器会直接忽略该声明，使容器退化为普通块级元素，导致后续所有 Flex 相关属性（如 flex-direction、justify-content）全部失效。
例如，原始代码中存在如下错误声明：
.rightPanelItems {
display: flexbox; /* ❌ 错误：非法值，Flex 上下文未创建 */
flex-direction: column;
justify-content: center;
height: 100%;
}
✅ 正确写法应为：
.rightPanelItems {
display: flex; /* ✅ 必须为 'flex' */
flex-direction: column;
justify-content: space-between; /* 垂直方向等距分配空间 */
height: 100%;
}
同时，为确保每个按钮高度自适应且间距均匀，建议移除 .rightPanelButton 上冗余的 flex: 1 0 auto 和 margin: auto —— 否则会与 space-between 冲突，造成顶部/底部空白异常。优化后的按钮样式可简化为：
.rightPanelButton {
background-color: darkolivegreen;
/* 删除 margin: auto 和 flex 声明 */
}
.rightPanelButton > a {
display: block;
padding: 12px 16px;
color: white;
text-decoration: none;
text-align: center;
}
? 额外提示：
- 若需首尾按钮紧贴容器上下边缘，而中间按钮等距分隔，justify-content: space-between 是最佳选择；
- 若希望所有按钮（含首尾）之间留空、整体居中，则改用 justify-content: space-evenly；
- 确保父容器（如 .flex1 和 .rightPanel）具有明确高度（如 height: 100% 或视口单位），否则 100% 高度无法继承；
- 使用浏览器开发者工具检查 .rightPanelItems 的 computed display 值，快速验证 Flex 是否已生效。
通过修正这一拼写错误并合理组合 Flex 属性，即可轻松实现右侧功能按钮在垂直方向上的清晰、可控、响应式分布。
