flex: none 不适合侧边栏折叠动效，因其等价于 flex: 0 0 auto，放弃弹性控制权、不响应尺寸变化、不支持 transition，且 flex-basis 被强制为 auto，width 修改无效，safari 等还可能坍缩为 0。
flex: none 不能用于实现侧边栏的展开与折叠——它根本不会响应尺寸变化，也不支持过渡动画。
为什么 flex: none 不适合做折叠动效
flex: none 等价于 flex: 0 0 auto，意思是「不放大、不缩小、基准尺寸按内容算」。它不是「固定死宽度」，而是「放弃弹性控制权，退回到内容撑开模式」：
- 折叠时设
width: 60px？没用——flex: none下 width 是初始值，仍可能被内部文字、图标容器撑宽 - 想用
transition: width？浏览器不会触发重排动画，因为flex: none的项不参与 flex 分配，width变化不触发 layout 更新 - 设
flex-basis: 60px？无效——flex: none显式锁死flex-basis: auto，你写的值会被忽略 - 在 Safari 或旧 Android WebView 中，
flex: none甚至可能解析为flex: 0 0 0，导致侧边栏直接坍缩成一条线
真正该用的组合：flex-basis + CSS 变量 + transition
要让侧边栏可折叠且动画平滑，必须让它「留在 Flex 流程里」，同时允许压缩到极小值：
- 父容器必须是
display: flex; flex-direction: row;（显式声明，别依赖默认） - 侧边栏写：
flex-basis: var(--sidebar-width, 240px); min-width: 0; overflow: hidden; - 主内容区写：
flex: 1 1 0; min-width: 0;（关键：flex-basis: 0才能准确分配剩余空间） - JS 控制只改一个变量：
document.documentElement.style.setProperty('--sidebar-width', '64px'); - 过渡必须包含
overflow：transition: flex-basis 0.25s ease, overflow 0.25s ease;，否则收起瞬间内容会闪出
折叠态下内容仍可见？检查这三点
即使 flex-basis 缩到 64px，侧边栏仍可能“看起来没缩”：
- 内部有
white-space: nowrap的长 URL 或日志行 → 加overflow-x: hidden; text-overflow: ellipsis; - 子项用了
display: flex或display: grid但没设min-width: 0→ 子项自身抗压缩，把父容器顶宽 - 用了
box-sizing: content-box+ padding → 实际宽度 =flex-basis+ padding，视觉上仍有厚度；统一用box-sizing: border-box
移动端全隐藏场景不要硬套 flex-basis
如果目标是汉堡菜单那种「完全移出视口」，flex-basis 就不合适了：
- 改用
transform: translateX(-100%)+ 父容器overflow-x: hidden - 主内容区不能靠
flex: 1自动填满，得手动加margin-left: 240px或padding-left: 240px - 此时必须同步处理可访问性：
opacity: 0.01; pointer-events: none;，而不是display: none
真正容易被忽略的是：折叠不是“藏起来”，而是“重新协商布局流”。用 flex: none 就等于主动退出协商——它连最小宽度都由内容说了算，自然没法折叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
