直接结论：别用 flex-direction 切换实现折叠动画，它不可过渡、不触发重排预期，且容易让主内容区宽度失控；父容器未设 display: flex 是 flex-direction: column 失效的根本原因，子元素含 position: absolute 或非直系嵌套也会破坏弹性上下文。
直接结论：别用 flex-direction 切换实现折叠动画，它不可过渡、不触发重排预期，且容易让主内容区宽度失控。
为什么 flex-direction: column 在侧边栏里常没效果
父容器没启用 Flex 布局是根本原因。即使写了 flex-direction: column，如果父元素的 display 不是 flex（或被 display: grid 等覆盖），该属性就完全无效。还要确认：
- 侧边栏和主内容必须是该容器的**直系子元素**，中间不能嵌套无关
div或用display: contents - 子元素不能有
position: absolute、flex: none，否则会被排除出 flex 流程 - 用浏览器开发者工具检查 computed 样式，确认
display确实是flex，且flex-direction未被其他规则覆盖
width 动画为何总卡顿或压不下去
width 表面可过渡，但在 Flex 容器中极易失效，因为：
-
flex-basis会覆盖width，尤其当侧边栏设了flex: 0 0 auto时 - 默认
min-width: auto会锁住最小内容宽（比如图标+文字组合），width: 0压不下去 - 内部有
white-space: nowrap的长文本（如日志、URL）会撑开容器 - 用了
box-sizing: content-box又加了padding，实际宽度 =width+padding，width: 0后仍占空间
若坚持用 width，必须同时加：overflow: hidden、min-width: 0、transition: width 0.3s ease, overflow 0.3s ease。但更推荐用 flex-basis 或 max-width 替代。
立即学习“前端免费学习笔记（深入）”；
真正稳定可用的折叠方案（Flexbox + 状态控制）
核心是分离「初始状态」和「交互动画」，避免页面加载时闪动：
- 给侧边栏设
flex: 0 0 240px，主内容设flex: 1；折叠时，侧边栏加transform: translateX(100%)（不脱离文档流），主内容加width: 100%强制撑满 - 初始加载 JS 时，先给容器加
.init-transition-off类，禁用所有transition；等 DOM 渲染完再移除，只在用户点击后才启用动画 - 状态存
localStorage，读取后立即应用类名，但跳过首次 CSS 过渡 - 移动端默认折叠，桌面端可 hover 展开；遮罩层关闭需监听
document点击，而非仅侧边栏内
最易被忽略的是：折叠后主内容区的宽度逻辑不是靠 flex: 1 自动继承的——它需要显式 width: 100% 或一层独立 wrapper 脱离 flex 分配。否则小屏下切到 column 或收起侧边栏时，主区可能残留空白或溢出。
