flex-basis改了但宽度不动，大概率是父容器未启用flex布局（缺display: flex或flex-direction: row），或子项被width、flex-wrap: wrap、flex简写（如flex: 1）覆盖了flex-basis值；动画需统一单位、显式声明初始值并加min-width: 0解除内容撑开限制，ie11需降级为width或transform动画。
直接改 flex-basis 没反应，大概率不是代码写错，而是父容器没走 Flex 流程，或你被 auto、width、flex-wrap 中的某一个悄悄拦住了。
为什么 flex-basis 改了但宽度不动？
常见现象：JS 调了 element.style.flexBasis = '64px'，或者切了 .sidebar-collapsed 类，但侧边栏要么卡在原宽、要么突变、要么完全没变化。
- 父容器缺
display: flex或flex-direction: row——flex-basis在非 Flex 容器里是无效属性 - 侧边栏自己写了
width（比如width: 240px）——它会直接覆盖flex-basis，哪怕flex-shrink: 0也救不回来 - 父容器设了
flex-wrap: wrap—— 一换行，flex-basis就不再控制单行宽度，收缩逻辑彻底失效 - 用了
flex: 1或flex: auto这类简写 —— 它们会把flex-basis重置为auto或0%，覆盖你手动设的值
怎么让 flex-basis 动画平滑不跳变？
flex-basis 支持 CSS transition，但浏览器只对「可插值」的单位做中间帧计算。从 auto → 64px 是非法过渡，必然跳变。
- 初始状态必须显式声明具体值：
.sidebar { flex-basis: 240px; }，不能留空或依赖默认auto - 目标状态用同单位数值：
.sidebar-collapsed { flex-basis: 64px; }，禁用auto、content、fit-content等不可计算值 - 加
box-sizing: border-box—— 否则padding和border会额外撑宽，导致动画终点比预期宽出几十像素 - 过渡只写
flex-basis，别混进width或transform—— 多属性同时动容易不同步，尤其在 Safari 里
为什么加了 min-width: 0 才能真正缩到 64px？
即使 flex-basis 从 240px 改成 64px，如果侧边栏里有长文本、图标容器或内联元素，它仍可能撑开、换行甚至溢出——因为浏览器对 flex 项默认应用 min-width: auto，意思是“至少保证内容可读”。
-
min-width: 0不是设最小为 0，而是重置这个隐式保护机制，允许内容被压缩、截断或换行 - 只加这一条还不够：配套得加
overflow-x: hidden防止文字溢出，white-space: nowrap+text-overflow: ellipsis控制文本截断 - 如果侧边栏内部还有子 flex 容器（比如菜单项用
display: flex），它们也得各自加min-width: 0，否则链路一环没放开，整个就卡住
IE11 兼容怎么办？它根本不认 flex-basis 的 transition
IE11 支持 flex-basis 属性，但对它的 CSS 动画完全无感。所有基于该属性的 transition 都会立即跳变，没有中间帧。
- 检测方式：
if (document.documentMode === 11) - 降级方案一：改用
width+overflow: hidden+transition: width，同时确保父容器用flex: 1自适应，避免布局断裂 - 降级方案二：用
transform: scaleX(0)缩放整个侧边栏，视觉上近似收起，且 IE11 支持该 transition - 关键点：无论选哪种，主内容区都必须保持
flex: 1（或flex: 1 0 0），确保它在侧边栏“视觉消失”后立刻占满剩余空间——这才是用户感知到的“收缩完成”
真正难的不是让宽度变小，而是让整条 flex 链路上每个环节都放弃“撑开”的本能：从侧边栏自身，到它的文字、图片、子容器，再到父容器的 flex-wrap 设置和主内容区的 flex 值，漏掉任何一个，收缩就可能卡在某个环节不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
