正确做法是用 flex-basis 配合 min-width: 0 和 overflow: hidden 实现侧边栏折叠，既保持 DOM 可访问性又支持平滑动画；通过 CSS 变量动态控制 --sidebar-width，主内容区设 flex: 1 1 0 并确保父容器为 flex 布局。
侧边栏折叠时宽度归零但内容仍可访问？用 flex 的 flex-basis 配合 min-width
直接设 width: 0 或 display: none 会导致子元素无法聚焦、屏幕阅读器跳过，也不利于动画过渡。正确做法是保留布局流，仅压缩视觉宽度。
关键在于：折叠状态不靠 width 控制，而用 flex-basis + min-width 组合：
-
flex-basis: var(--sidebar-width, 240px)—— 主宽度由 CSS 变量驱动 -
min-width: 0—— 允许flex-basis被压缩到极小值（否则 flex 项有默认最小尺寸） - 配合
overflow: hidden隐藏溢出内容，视觉上“消失”但 DOM 仍在
这样既保持语义结构完整，又支持平滑 transition（flex-basis 是可动画属性）。
如何用 CSS 变量动态切换折叠/展开状态？避免 JS 操作 class
不用写一堆 .sidebar--collapsed 类，直接用 :root 或组件级自定义属性控制：
立即学习“前端免费学习笔记（深入）”；
- 在根节点设置初始变量：
:root { --sidebar-width: 240px; } - 折叠时 JS 只需改一个值：
document.documentElement.style.setProperty('--sidebar-width', '60px');（60px 是图标区宽度，非 0） - 若需完全收起，设为
'0'，但必须搭配min-width: 0和overflow: hidden才生效
注意：不要用 calc() 包裹变量做减法（如 calc(var(--sidebar-width) - 180px)），部分浏览器对 calc 中的变量动画支持不稳定；直接设具体值更稳妥。
Flex 布局中主内容区如何自动填满剩余空间？别用 flex: 1 硬撑
flex: 1 看似简单，但在 sidebar 折叠/展开过程中容易导致主内容区宽度突变或溢出。真实项目中更可靠的是：
- 给主内容区设
flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0） - 确保父容器是
display: flex且flex-direction: row - 侧边栏和主内容区都需显式声明
min-width: 0，防止内容（如长单词、URL）撑破 flex 容器
如果主内容里有表格或预格式化文本，额外加 overflow-x: auto 防止横向滚动丢失。
折叠动画卡顿或不触发？检查这些隐藏条件
即使写了 transition: flex-basis 0.3s ease，动画也可能失效：
- 父容器未设
display: flex或flex-wrap: nowrap（默认值，但显式声明更安全） - 侧边栏设置了
white-space: nowrap且内部有不可折行文本，会强制拉宽容器，抵消flex-basis缩小效果 - CSS 变量更新后未触发重排 —— 确保修改变量的 JS 在渲染帧内执行（避免被批量合并），必要时加
getComputedStyle(el).transform强制触发 - 使用了
will-change: flex-basis可能引发 GPU 内存泄漏，仅在高频切换场景下按需启用
最常被忽略的一点：移动端 Safari 对 flex-basis 动画的支持晚于 Chrome/Firefox，iOS 15+ 才稳定，旧版本建议 fallback 到 max-width + overflow 组合。
