flex-basis 改变后不生效需检查父容器是否启用 flex 布局（display: flex）、flex-direction 和 flex-wrap 设置，避免 width 或 min-width 冲突，动画需统一单位并显式声明初始值，js 控制推荐 class 切换，ie11 不支持其 transition 应降级处理。
flex-basis 改变后不生效？检查父容器是否设了 flex-direction 和 flex-wrap
直接改 flex-basis 没反应，大概率是父容器没走 Flex 布局流程。它不是独立生效的属性，必须依赖父元素启用了 display: flex，且子项未被 flex: none 或 width 强制锁死。
- 确认父容器有
display: flex且flex-direction是row（横向布局时flex-basis控制宽度） - 避免同时设置
width—— 它会覆盖flex-basis，尤其在未设flex-shrink: 0时更易冲突 - 如果父容器写了
flex-wrap: wrap，子项可能换行，此时flex-basis表现会偏离预期，收缩动画容易卡住
用 transition 动画 flex-basis 时，为什么宽度跳变或不平滑？
flex-basis 本身支持 CSS 过渡，但跳变常源于单位不一致或初始值未显式声明。
- 必须统一用
px、%或rem等可计算单位，禁止混用auto和具体数值（比如从auto→240px不会过渡） - 初始状态要写死，例如侧边栏默认设
flex-basis: 240px，收缩时改为flex-basis: 60px，中间加transition: flex-basis 0.3s ease - 别忘了加
box-sizing: border-box，否则 padding/border 会额外撑开宽度，导致动画终点偏移
JavaScript 控制 flex-basis 收缩：用 class 切换比直接改 style 更稳
直接操作 element.style.flexBasis 容易和 CSS 优先级、框架样式（如 React 的 inline style）打架，class 方式更可控。
- 定义两个 class：
.sidebar-collapsed { flex-basis: 60px; }和.sidebar-expanded { flex-basis: 240px; } - 用
element.classList.toggle('sidebar-collapsed')切换，避免内联样式残留 - 如果需要响应式适配（比如小屏下默认折叠），可在媒体查询里覆盖
flex-basis，class 机制天然兼容 - 注意：不要在 class 里写
!important，它会让后续 JS 切换失效
IE11 兼容 flex-basis 动画？基本不可行，得降级处理
IE11 虽支持 flex-basis，但对它的 transition 完全不认，所有基于该属性的动画都会立即跳变。
- 检测 IE11 可用
document.documentMode，然后改用width+overflow: hidden配合transition模拟收缩效果 - 或者用
transform: scaleX()缩放整个侧边栏容器，视觉上近似，且 IE11 支持该 transition - 如果项目已放弃 IE11，就别花时间做 fallback —— 现代浏览器中
flex-basis动画足够可靠
min-width: 60px，都可能让收缩卡在最小值不动，这种细节很难一眼看出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
