Flexbox 是最稳的侧边栏布局方案：父容器设 display: flex，侧边栏用 flex: 0 0 240px，主内容用 flex: 1；折叠动画必须用 transform: translateX() 配合 transition，禁用 width/display 切换；JS 需确保 DOM 就绪，移动端需单独处理 touch 事件并分层拦截手势冲突。
用 Flexbox 布局侧边栏和主内容，别碰 float 或 inline-block
Flex 是目前最稳的布局方式，能自然隔离侧边栏宽度和主内容宽度，避免 margin-left 硬编码导致响应式错位。父容器设 display: flex，侧边栏用 flex: 0 0 240px（不伸展、不收缩、固定基准宽），主内容用 flex: 1 自动填满剩余空间。
常见错误是给主内容写死 margin-left: 240px —— 屏幕一缩，侧边栏变窄，主内容就溢出或留白；或者用 float 后忘记清除浮动，导致后续元素塌陷。
- 侧边栏容器必须有明确宽度值（如
240px）或最小宽度（min-width: 200px），否则flex: 0 0失效 - 主内容区域建议加
overflow-y: auto，防止长内容撑破布局 - 不要在 flex 容器上加
transform或will-change，否则可能破坏position: sticky行为
折叠动画必须用 transform: translateX()，别碰 width 或 display
想让折叠有平滑过渡，只能对 transform、opacity、visibility 做 transition。用 width: 0 或 display: none 切换，动画会跳变甚至完全失效 —— 因为 width 从具体值到 auto 不可过渡，display 根本不支持过渡。
正确做法：侧边栏设 position: fixed 或 absolute，展开时 transform: translateX(0)，折叠时 transform: translateX(-100%)。这样走 GPU 加速，不触发重排，滚动也丝滑。
立即学习“前端免费学习笔记（深入）”；
- 必须给侧边栏加
will-change: transform（仅限折叠频繁的场景，别滥用） -
translateX(-100%)比left: -300px更可靠 —— 后者依赖预估像素值，不同设备易偏移 - 遮罩层（
.overlay）要和侧边栏同级，z-index高于主内容但低于侧边栏
JS 绑定事件前确认 DOM 已就绪，别在 <head> 里执行
点击按钮没反应？八成是 JS 执行时元素还没生成。尤其当侧边栏用 Vue/React 动态渲染，或按钮通过 JS 插入时，document.querySelector('.toggle') 会返回 null。
安全做法是把 JS 放在 </body> 前，或包一层 DOMContentLoaded。如果按钮是动态插入的，得用事件委托，比如监听 body 上的 click 并过滤 data-target 属性。
- 按钮的
data-target值必须和侧边栏的id完全一致（区分大小写、空格） - 避免用 class 名直接选中多个元素再遍历 —— 一个页面多个侧边栏时容易误操作
- Vue/React 场景下，别用原生
querySelector绑定，改用框架提供的生命周期钩子或 ref
移动端手势关闭需单独处理 touch 事件，别指望 click 兼容
在手机上右滑关闭侧边栏，不能只靠 click 或 hover。原生 touch 事件需要手动识别方向和阈值，且必须干预默认行为，否则手势会被页面滚动劫持。
关键点：在侧边栏元素上加 touch-action: pan-y，允许内部垂直滚动但禁用水平拖拽干扰；监听 touchstart 记起始 X，touchmove 算偏移，超过 50px 且向右滑就触发关闭。
- 侧边栏内部若有可滚动区域（如长菜单列表），要在该容器上监听
touchmove并preventDefault()，但只限内部，不能影响外层抽屉手势 - 松手后要判断滑动距离是否达标 —— 不足阈值就复位，否则彻底关闭
- 别忘了加
touch-action: none到遮罩层，防止点击穿透
