Flexbox 子项在垂直方向上未均匀分布，通常源于 display: flexbox 这一无效声明（CSS 中不存在该值），正确写法应为 display: flex；修正后配合 justify-content: space-between 可实现等距垂直排列。
flexbox 子项在垂直方向上未均匀分布，通常源于 `display: flexbox` 这一无效声明（css 中不存在该值），正确写法应为 `display: flex`；修正后配合 `justify-content: space-between` 可实现等距垂直排列。
在使用 Flexbox 构建响应式侧边栏按钮组时，一个高频但隐蔽的问题是：右侧垂直排列的按钮未能按预期均匀占据容器高度。其根本原因往往并非逻辑复杂，而是 CSS 属性值书写错误——例如将 display: flex 误写为 display: flexbox。
该写法在所有浏览器中均无效，会导致 .rightPanelItems 容器退化为普通块级元素，其内部的 flex-direction: column 和 justify-content 等弹性布局属性完全失效，按钮仅按文档流堆叠，margin: auto 和 flex: 1 也无法生效。
✅ 正确修复步骤如下：
-
修正 display 声明：
将错误的 display: flexbox 替换为标准的 display: flex：
.rightPanelItems {
display: flex; /* ✅ 关键修正 */
flex-direction: column;
justify-content: space-between; /* 均匀分配垂直空间 */
background-color: yellow;
height: 100%;
}
-
优化子项样式，移除冲突声明：
.rightPanelButton 原设 flex: 1 0 auto 本意是等高拉伸，但在 justify-content: center 下反而限制了间距控制；改用 space-between 后，应移除 flex 和 margin: auto，避免干扰主轴对齐：
.rightPanelButton {
background-color: darkolivegreen;
/* 删除：flex: 1 0 auto; 和 margin: auto; */
/* 按钮保持自然尺寸，由父容器统一控制间距 */
}
-
补充健壮性建议：
- 显式设置 height: 100% 的父容器需确保其祖先链中无 height: auto 阻断（如本例中 .rightPanel 和 .flex1 均需继承高度）；
- 推荐使用 flex-direction: column + justify-content: space-evenly（更现代、边缘留白更均衡）替代 space-between；
- 在开发中启用浏览器开发者工具的“Flexbox 调试”模式（Chrome / Firefox 均支持），可直观查看 flex 容器与项目状态。
最终效果：四个绿色按钮将沿垂直方向均匀分布，首尾分别贴合容器上下边缘，中间间隔相等——这正是语义清晰、维护性强的 Flexbox 布局所应呈现的标准行为。
