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 布局的关键参数组合

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

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

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

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

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

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

语义化与可访问性不能省

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！