flex-basis改了但宽度不动，根本原因是父容器未启用flex布局（缺display:flex或flex-direction:row），或子项被width、flex-wrap:wrap、flex简写（如flex:1）覆盖；动画需统一单位、显式声明初始值并加min-width:0解除内容撑开限制，ie11需降级为width或transform动画。
flex-basis 改了但宽度不动？先确认父容器是否真在走 Flex 流程
直接改 flex-basis 没反应，不是 JS 写错了，而是布局根本没进入 Flex 上下文。浏览器对非 Flex 容器里的 flex-basis 完全忽略。
- 检查父容器是否同时有
display: flex和flex-direction: row（横向分栏时必须） - 确认没被
display: grid、float或框架内联样式覆盖（用 DevTools 的 Computed 面板看真实值） - 侧边栏自己不能设
width—— 它会直接压掉flex-basis，哪怕flex-shrink: 0也救不回来 - 父容器不能有
flex-wrap: wrap—— 一旦换行，flex-basis就不再控制单行宽度
为什么收缩动画跳变或卡顿？单位和初始值必须一致
flex-basis: auto → 64px 是非法过渡，浏览器无法插值，必然跳变。平滑动画的前提是起始值和目标值都可量化、单位相同、且不依赖内容计算。
- 初始状态必须显式写死：
.sidebar { flex-basis: 240px; }，别留空或靠默认auto - 收缩态写同单位数值：
.sidebar-collapsed { flex-basis: 64px; }，禁用content、fit-content、calc()包变量（Safari 支持不稳定） - 加
box-sizing: border-box，否则padding和border会让终点宽度比预期多出几十像素 - 只过渡
flex-basis和padding，别混进width或transform—— 多属性不同步在 Safari 里尤其明显
缩不到 64px？min-width: 0 不是可选项，是必选项
即使 flex-basis 设成 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动画完全不支持，得降级：检测document.documentMode，改用width或transform: scaleX(0)
主内容区滚动失效？漏掉 min-height: 0 或 height: 100% 就静默崩盘
表面看写了 flex: 1，但主区域高度为 0 或撑满全屏却无法内部滚动，根本原因不是 flex 写错了，而是父容器没走完整 Flex 流程。
-
.main-layout（即侧边栏 + 内容区的直接父容器）必须同时设display: flex、flex-direction: row和min-height: 0 -
.content设了overflow: auto后，它的**直接子容器**必须加height: 100%，否则滚动上下文不成立 - IE11 下
flex: 1计算错误，必须写成flex: 1 1 0，并确保min-height: 0生效 - 别把
display: flex加在body上 —— 某些浏览器会干扰height: 100vh计算
min-height: 0、哪个子容器要补 height: 100%、以及折叠时要不要放开 min-width —— 这些点一漏，整个布局就静默失效，连控制台都不报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
