display: flex 是最高效可控的侧边栏布局方案，因其不依赖定位上下文、不触发重排、响应式成本低且支持滚动隔离；而 position: fixed 易受父级 transform 等属性干扰、需手动避让、存在 iOS 跳动问题，仅适用于全局浮层。

display: flex 是当前最高效、最可控的侧边栏布局方案，尤其适合内容管理系统类后台。它不依赖定位上下文、不触发重排陷阱、响应式切换成本低，且天然支持滚动隔离。

为什么不用 position: fixed 做侧边栏

fixed 容易被父级 transform、will-change 或 perspective 打断定位基准，导致“钉不住视口”；主内容必须手动加 margin-left 避让，一旦侧边栏宽度响应式变化，就得同步维护多处 media query；iOS Safari 在缩放或键盘弹出时还会触发跳动。

除非你明确需要脱离文档流+绝对视口锚定（如全局操作浮层），否则不要用 position: fixed 做主侧边栏。

display: flex 布局的关键参数组合

核心不是“怎么写菜单”，而是父子容器如何协同撑高与留白：

• 父容器设 display: flex + height: 100vh（避免高度塌陷）
• 侧边栏用 flex: 0 0 240px（不放大、不缩小、基础宽 240px）
• 主内容区用 flex: 1 + overflow: auto（自动填满剩余空间，并独立滚动）
• 避免给主内容加 margin-left——那是浮动时代的遗留写法，flex 下完全多余

移动端收起侧边栏的可靠做法

抽屉式切换比 display: none 更可控，也兼容 SSR：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 默认状态：侧边栏加 transform: translateX(-100%) + transition: transform 0.3s ease
• 展开时加 .sidebar.open { transform: translateX(0); }
• 同时控制主内容区：.sidebar.open ~ .main-content { margin-left: 240px; } 或直接用兄弟选择器联动
• 注意：不要只靠 opacity 或 visibility 隐藏——点击热区还在，用户仍可能误触

语义化与可访问性不能省

用 <nav> 包裹菜单项，加 aria-label="主菜单"；每个菜单项用 <a> 或带 role="link" 的 <button>；激活态统一靠 JS 动态加 aria-current="page"，而非仅靠 CSS 类名。

很多团队在性能优化上花大力气，却忽略键盘 Tab 焦点顺序错乱、屏幕阅读器读不出当前页标识——这类问题上线后才暴露，修复成本远高于初期结构设计。