应使用 width + var(--nav-width) 替代 flex-basis，因 CSS 规范限制 flex-basis 不支持直接解析 CSS 变量；侧边栏设 width: var(--nav-width, 240px); flex: 0 0 auto;，主内容区设 flex: 1;。
用 width + var(--nav-width) 替代 flex-basis 直接绑定
浏览器不支持在 flex-basis 里直接写 var(--nav-width)，即使变量带单位也会被静默忽略。这不是你写错了，是 CSS 规范限制——flex 简写和 flex-basis 值解析时无法动态注入变量。
实操建议：
- 侧边栏设
width: var(--nav-width, 240px); flex: 0 0 auto;，主内容区设flex: 1; -
--nav-width必须定义带单位：:root { --nav-width: 240px; }，写成240或240rem（单位错）都会失效 - 如果要用
calc()做微调，fallback 不可少：width: calc(var(--nav-width, 240px) - 20px); - Safari 旧版本可能不响应变量更新，JS 修改后加一句
getComputedStyle(document.documentElement).transform;强制重排
收缩时宽度归零但保持可访问性，别用 display: none
直接设 width: 0 或 display: none 会让导航项退出布局流，键盘焦点丢失、屏幕阅读器跳过，动画也容易卡顿。
安全做法是保留 DOM 流，仅压缩视觉表现：
- 折叠状态用
width: var(--nav-width, 64px); overflow: hidden;，配合text-overflow: ellipsis;隐藏文字 - 图标模式下，确保点击热区 ≥ 44×44px：给按钮加
padding: 12px;或用::before扩展伪元素触控区 - 避免同时设
flex: 1和width，二者冲突；固定宽场景下flex: 0 0 auto更可靠
过渡动画失效？只对可插值属性做 transition
flex-basis 虽然能动画，但变量驱动时容易因未触发重排而“不动”；width 动画又怕 auto 或百分比导致跳变。
稳妥方案：
- 两端都用具体像素值：
transition: width 0.3s ease-in-out;，从240px → 64px，禁用auto、fit-content - 或改用
transform: scaleX()+overflow: hidden，性能更好、兼容性更稳 - 别对
flex-basis做transition：它不支持过渡，浏览器会忽略该声明 - JS 切换 class 后，若动画没起效，检查 computed 样式中
width是否已变成目标像素值；不是，说明变量没生效或被更高优先级规则覆盖
媒体查询中覆盖变量，但小屏下仍撑不开？检查作用域和父容器
写了 @media (max-width: 768px) { :root { --nav-width: 64px; } } 却没变化，大概率是作用域或父容器布局拦截了变量生效。
排查要点：
- 变量必须在
:root或组件根元素上定义，不要写在.sidebar类内部（子选择器读不到） - 父容器用了
display: flex但没给侧边栏设flex-basis或width，变量就算生效，也被 flex 默认行为吞掉 - 检查是否误用
minmax()：比如grid-template-columns: minmax(240px, 1fr) 1fr，其中1fr作上限是无效语法，整条声明会被浏览器丢弃 - 移动端折叠后主内容区没及时撑满？确认主内容区用了
flex: 1或width: calc(100% - var(--nav-width))，且后者 fallback 完整
变量本身不触发重排，真正起作用的是它驱动的 width 值变化；而这个变化是否生效，取决于有没有其他布局规则（比如 flex 简写、overflow、父容器 display 类型）把它压制住。调试时先看 computed 样式里的 width 是不是你预期的像素值，不是就往变量定义位置和层叠顺序上找。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
