如何通过CSS Flexbox实现一个支持多级菜单嵌套的响应式侧栏？-css教程-PHP中文网

flexbox 仅负责布局，不支持多级菜单交互逻辑；展开/收起需 javascript 控制状态，css 通过 class 切换实现样式过渡，子菜单须脱离 flex 流用 absolute 定位，并兼顾可访问性与响应式处理。

如何通过css flexbox实现一个支持多级菜单嵌套的响应式侧栏？

Flexbox 本身不支持多级菜单嵌套的展开/收起逻辑

Flexbox 是布局工具，不是交互控制器。它能帮你对齐、分配空间、控制主轴侧轴方向，但无法处理「点击展开子菜单」「hover 显示下级」「键盘导航焦点管理」这类行为。这些必须靠 JavaScript 驱动，CSS 只负责呈现状态变化后的样式。

常见错误是试图用 display: flex + flex-direction: column 堆叠所有菜单项，然后指望子菜单自动“弹出来”——结果只是被压扁在父容器里，或者溢出不可见。

子菜单默认应设为 display: none 或 height: 0 + overflow: hidden
展开时 JS 切换 class（如 .is-open），CSS 基于该 class 控制 display / max-height / opacity
Flexbox 的作用仅限于：让侧栏整体保持垂直流、让菜单项等高对齐、让图标和文字在行内居中

侧栏容器必须设为 `flex-direction: column` 且高度可控

如果侧栏高度依赖内容自然撑开，子菜单展开后可能撑破视口或触发意外滚动。响应式场景下尤其危险——小屏设备上，未限制高度的 flex 容器会把所有菜单项一股脑挤进屏幕，根本看不到底部。

正确做法是让侧栏自身可滚动，内部菜单项保持弹性分布，子菜单展开时不破坏整体结构：

侧栏根元素设 display: flex + flex-direction: column + height: 100vh（或 100dvh）
顶部 logo / 用户区用 flex: 0 0 auto 固定尺寸
菜单列表区域用 flex: 1 1 0 占满剩余空间，并加 overflow-y: auto
避免对菜单项本身设 flex: 1，否则子菜单展开时会压缩其他项高度

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.sidebar-header { flex: 0 0 64px; }
.sidebar-nav { flex: 1 1 0; overflow-y: auto; }