display: flex 是最高效可控的侧边栏布局方案，因其不依赖定位上下文、不触发重排、响应式成本低且支持滚动隔离；而 position: fixed 易受父级 transform 等属性干扰、需手动避让、存在 iOS 跳动问题，仅适用于全局浮层。
是当前最高效、最可控的侧边栏布局方案，尤其适合内容管理系统类后台。它不依赖定位上下文、不触发重排陷阱、响应式切换成本低，且天然支持滚动隔离。
为什么不用
做侧边栏
fixed 容易被父级
、
或
打断定位基准，导致“钉不住视口”；主内容必须手动加
避让，一旦侧边栏宽度响应式变化，就得同步维护多处 media query；iOS Safari 在缩放或键盘弹出时还会触发跳动。
除非你明确需要脱离文档流+绝对视口锚定（如全局操作浮层），否则不要用
做主侧边栏。
布局的关键参数组合
核心不是“怎么写菜单”，而是父子容器如何协同撑高与留白：
父容器设
+
（避免高度塌陷）
侧边栏用
（不放大、不缩小、基础宽 240px）
主内容区用
+
（自动填满剩余空间，并独立滚动）
避免给主内容加
——那是浮动时代的遗留写法，flex 下完全多余
移动端收起侧边栏的可靠做法
抽屉式切换比 display: none 更可控，也兼容 SSR：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
默认状态：侧边栏加
+
展开时加
同时控制主内容区：
或直接用兄弟选择器联动
注意：不要只靠
或
隐藏——点击热区还在，用户仍可能误触
语义化与可访问性不能省
用
包裹菜单项，加
；每个菜单项用
或带
的
；激活态统一靠 JS 动态加
，而非仅靠 CSS 类名。
很多团队在性能优化上花大力气，却忽略键盘 Tab 焦点顺序错乱、屏幕阅读器读不出当前页标识——这类问题上线后才暴露，修复成本远高于初期结构设计。
display: flexposition: fixedtransformwill-changeperspectivemargin-leftposition: fixeddisplay: flexdisplay: flexheight: 100vhflex: 0 0 240pxflex: 1overflow: automargin-lefttransform: translateX(-100%)transition: transform 0.3s ease.sidebar.open { transform: translateX(0); }.sidebar.open ~ .main-content { margin-left: 240px; }opacityvisibilityaria-label="主菜单"role="link"aria-current="page"