直接改flex-basis没反应，根本原因是父容器未启用flex布局（缺display: flex）、子项被width或flex: none锁死，或父容器设了flex-wrap: wrap导致行为异常。
为什么直接改 flex-basis 没反应？
常见现象：写了 transition: flex-basis 0.3s，JS 也调了 element.style.flexBasis = '60px'，但宽度要么不动、要么突变。根本原因不是代码写错，而是父容器没走 Flex 流程——它压根不认这个属性。
必须确认三点：
- 父容器有
display: flex且flex-direction: row（横向布局时flex-basis控制宽度） - 侧边栏没被
flex: none或显式width锁死（width会覆盖flex-basis） - 父容器没设
flex-wrap: wrap（换行会让flex-basis行为失常）
flex-basis 动画跳变或不平滑？单位和初始值是关键
从 auto → 240px 不会过渡，浏览器无法计算中间值。动画生效的前提是起始值和目标值都可量化、单位一致。
实操建议：
- 初始状态必须显式声明，比如
.sidebar { flex-basis: 240px; } - 收缩目标用同单位数值，如
.sidebar-collapsed { flex-basis: 60px; }，禁用auto、content等不可计算值 - 加
box-sizing: border-box，否则padding/border会额外撑宽，导致动画终点偏移
用 class 切换比直接操作 style.flexBasis 更稳
直接写 element.style.flexBasis 容易被 CSS 优先级、框架内联样式（如 React 的 style 属性）覆盖，还可能残留旧值影响后续切换。
推荐做法：
- 定义两个 class：
.sidebar-expanded { flex-basis: 240px; }和.sidebar-collapsed { flex-basis: 60px; } - 用
element.classList.toggle('sidebar-collapsed')控制，干净无副作用 - 需要响应式适配（如小屏默认折叠），直接在媒体查询里覆盖
flex-basis值，class 机制天然兼容
IE11 下 flex-basis 动画失效怎么办？
IE11 支持 flex-basis 属性，但完全不支持它的 transition。所有基于该属性的动画都会立即跳变，没有中间帧。
降级方案有两个方向：
- 检测
document.documentMode，若为 IE11，则改用width + overflow: hidden配合transition: width模拟收缩 - 或用
transform: scaleX(0)缩放整个侧边栏容器，视觉上近似收起，且 IE11 支持该 transition
真正难处理的不是动画本身，而是确保主内容区在侧边栏“视觉消失”后能立刻、准确地占满剩余空间——这要求你始终把 flex-basis 当作布局控制手段，而非仅视觉修饰。一旦混用 width、margin-left 或 transform，弹性逻辑就容易断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
