最稳方案是用display: flex+flex: 0 0 [width]固定侧边栏、flex: 1让主区自适应；禁用position: fixed因其脱离文档流导致主区无法避让、缩放切内容、iOS动画卡顿，且必须让侧栏作为flex子项参与宽度计算。
用 display: flex + flex: 0 0 [width] 固定侧边栏，flex: 1 让主区自适应——这是目前最稳、最不易出错的方案，别碰 float 或 position: fixed。
为什么不能用 position: fixed 做侧边栏
它会让侧边栏脱离文档流，主内容区无法感知其存在，只能靠 margin-left 硬推——结果窗口缩小时内容被切掉，或滚动时侧栏“悬空”不动。更麻烦的是，fixed 元素在 iOS Safari 中与 transform 组合时有渲染 bug，抽屉动画会闪或卡顿。
真实项目里要让主区“自动避开”，必须让侧边栏是 flex 容器的子项，参与宽度计算。
- 侧边栏加
flex: 0 0 200px（不放大、不缩小、基准宽 200px） - 主内容区用
flex: 1（等价于flex: 1 1 auto），不是flex: 1 1 0 - 父容器必须有明确高度来源，比如
height: 100vh或min-height: 100vh
flex: 0 0 200px 和 width: 200px 有什么区别
width: 200px 只控制初始宽，但当内部内容过长（比如超长菜单文字），某些浏览器会撑开侧栏；而 flex: 0 0 200px 显式禁止放大和缩小，基准宽就是 200px，更可靠。
立即学习“前端免费学习笔记（深入）”；
如果你还加了 padding 或 border，记得侧边栏也设 box-sizing: border-box，否则总宽会超出 200px。
- 推荐写法：
.sidebar { flex: 0 0 200px; box-sizing: border-box; padding: 16px; } - 别写成：
.sidebar { width: 200px; padding: 16px; }（实际占宽 232px） - IE11 下建议补一句
width: 200px做兜底，因它的flex解析不稳定
主内容区加了 padding 为什么横向溢出
现象：侧栏 200px，主区设 flex: 1 + padding: 24px，结果出现横向滚动条。
原因：flex: 1 默认按 content-box 计算尺寸，padding 是额外加在分配宽度上的。
- 最简解法：给主区加
box-sizing: border-box - 现代替代：用
padding-inline: 24px（不参与 flex 基准宽计算，但 IE 不支持） - 别用
margin抵消——后续嵌套布局时会连锁错位
示例：
.main-content {
flex: 1;
padding: 24px;
box-sizing: border-box; /* 关键 */
overflow: auto;
}移动端怎么安全收起侧边栏又不影响桌面体验
不是简单 display: none，而是用 transform: translateX(-100%) 配合 transition 实现抽屉效果，桌面端媒体查询中直接取消 transform 并设 position: static。
关键点在于：移动端默认隐藏，点击汉堡图标才展开；桌面端始终显示且不遮挡主内容。
- 侧边栏加
transform: translateX(-100%)和transition: transform 0.3s ease - 用 JS 切换
is-openclass 控制显隐，避免内联样式 - 桌面断点里写：
@media (min-width: 768px) { .sidebar { transform: none; } } - iOS Safari 对
fixed + transform有 bug，建议侧栏用position: sticky替代fixed
容易被忽略的是：抽屉展开时，要加半透明遮罩层防误触，且遮罩需用 position: fixed 覆盖全屏——但这个遮罩只在移动端生效，桌面端完全不需要。
