真正可靠的侧边栏折叠动画需用margin-left或flex-basis配合min-width:0和overflow:hidden；禁用flex-direction切换，因其不可过渡且导致主内容区宽度失控。
别用 flex-direction 切换实现折叠动画——它不可过渡、不触发重排，主内容区宽度会失控；真正稳定的是用 flex-basis 或 margin-left 配合 min-width: 0 和 overflow: hidden。
为什么 flex-basis 动画常失效
不是代码写错了，而是布局根本没走 Flex 流程。必须确认：
-
display: flex和flex-direction: row确实生效于父容器（用开发者工具看 computed 样式） - 侧边栏初始值不能是
auto，得写死单位，比如flex-basis: 240px→flex-basis: 64px - 避免混用
calc()或 CSS 变量包裹的值，部分浏览器插值不稳定 - 子元素含
white-space: nowrap或长 URL 时，必须加min-width: 0，否则撑宽压不下去
width 过渡为何卡顿或压不到 0
width 表面可动画，但在 Flex 容器中极易被覆盖：
-
flex-basis优先级高于width，尤其当设了flex: 0 0 auto时 -
min-width: auto是默认行为，会锁住最小内容宽（比如图标+文字组合） -
box-sizing: content-box+padding导致实际宽度 =width+padding，width: 0后仍占空间 - 若坚持用
width，必须同步加：overflow: hidden、min-width: 0、transition: width 0.3s ease, overflow 0.3s ease
真正可靠的折叠方案：用 margin-left 释放布局空间
transform: translateX(-100%) 只改视觉位置，不释放空间；而负外边距能真实“退出文档流”，触发 Flex 重排：
- 左侧栏设
flex: 0 0 240px，初始margin-left: 0 - 折叠时改为
margin-left: -240px，等效于将其从主轴上“推离” - 主内容区用
flex: 1 1 0（即flex-grow: 1、flex-shrink: 1、flex-basis: 0），确保立即接管全部剩余宽度 - 必须给主内容区也加
min-width: 0，防内部长文本或表格撑破布局
状态初始化阶段最容易被忽略的细节
页面加载时直接启用 transition，会导致刷新瞬间闪动（从展开态跳到折叠态）。必须分两步处理：
- JS 加载后先读取
localStorage，立即应用.collapsed类，但同时加transition: none禁用动画 - DOM 渲染完成后再移除
transition: none，仅在用户点击后才启用过渡 - 折叠后主内容区不能只靠
flex: 1自动填满——它需要显式width: 100%或一层独立 wrapper 脱离 flex 分配，否则小屏切column或收起时可能留白或溢出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
