flex-basis 动画失效需先确认父容器 display: flex 和 flex-direction 生效，且单位一致（如 240px→64px），避免 auto 与固定值混用；推荐用 max-width 或 transform: scalex() 替代 flex-direction 动画，并配合 min-width: 0、overflow-x: hidden 等防止内容撑宽。
flex-basis 动画失效？先确认父容器和单位一致性
直接改 flex-basis 没反应，不是 JS 写错了，而是布局根本没走 Flex 流程。必须检查：display: flex 和 flex-direction: row 是否真在父容器上生效（用开发者工具看 computed 样式），且没被 display: grid 或其他样式覆盖。
动画跳变或不动，大概率是单位不一致：flex-basis: auto → flex-basis: 64px 不可过渡；必须初始值就写死，比如：.sidebar { flex-basis: 240px; }，折叠态写 .sidebar-collapsed { flex-basis: 64px; }。别用 calc() 包变量，部分浏览器对它的插值支持不稳定。
- 加
min-width: 0到侧边栏——否则内部长文本、图标容器会强制撑宽，flex-basis再小也压不住 - 配套
overflow-x: hidden+white-space: nowrap+text-overflow: ellipsis控制文字截断 - 避免
width和flex-basis同时设，前者会直接覆盖后者
主内容区突然错位？别依赖 flex: 1 自动填满
flex: 1 在 flex-direction: row 下控制宽度没问题，但切到折叠态后，如果侧边栏用了 flex-basis 缩小，主内容区可能因内容撑开或未设收缩策略而溢出或留白。更稳的做法是：flex: 1 1 0（即 flex-grow: 1、flex-shrink: 1、flex-basis: 0）。
- 主内容区也得加
min-width: 0，防止内部长 URL 或表格撑破布局 - 若内容里有预格式化文本（
<pre class="brush:php;toolbar:false;"></pre>）或固定宽表格，额外加overflow-x: auto - 别让侧边栏设
flex-shrink: 0，否则它不缩，主内容区就永远“算不准”剩余空间
想加收起动画？别碰 flex-direction
flex-direction 不支持 CSS transition，写 transition: flex-direction 0.3s 完全无效，只会浪费调试时间。所谓“卡顿”，其实是布局重排瞬间完成的视觉跳变，不是性能问题。
真正可动画的属性只有几个：flex-basis（推荐）、max-width（比 width 更安全）、transform: scaleX()（适合纯图标栏）。如果非要视觉收起，优先选 max-width：展开态 max-width: 240px，收起态 max-width: 0，再配 overflow: hidden。
- 收起时别用
width: 0——padding和border仍占空间，视觉不干净 - 用
transform: scaleX(0)时，记得同时设transform-origin: left，避免从中心缩 - 移动端默认收起，靠媒体查询控制：比如
@media (max-width: 768px) { .sidebar { max-width: 0; } }
折叠后文字消失但图标还在？靠 opacity + width 联动
单纯缩窄侧边栏，内部文字容易被裁切或点击区域失效。稳妥做法是：文字用 <span></span> 包裹，图标保持独立；收起时同步控制两者的显隐。
- 展开态：
.sidebar span { opacity: 1; width: auto; } - 收起态：
.sidebar-collapsed span { opacity: 0; width: 0; transition: opacity 0.2s, width 0.2s; } - 图标元素加
flex-shrink: 0，防止被压缩变形 - 所有过渡属性必须写全：
transition: flex-basis 0.3s ease, opacity 0.2s ease, width 0.2s ease，不然会不同步
复杂点在于，min-width: 0 和 overflow-x: hidden 必须逐层下推——侧边栏里每个子 flex 容器都得自己加一遍，漏一层就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
