直接用width做侧边栏折叠动画常失败，主因是未处理flex布局中flex-basis覆盖width、未设min-width:0导致无法压缩、未加overflow:hidden引发内容溢出。
直接用 width 做侧边栏折叠动画，90% 的失败不是写错了，而是没处理好 flex 布局、溢出和最小宽度这三件事。
为什么 width 过渡在侧边栏里常“不动”或“跳变”
浏览器无法对 auto 或未声明的初始值做过渡——比如 .sidebar { width: auto; }，后面加 transition: width 0.3s 是无效的。
- 必须显式设初始值：
width: 240px（展开态）→width: 60px（折叠态），不能用fit-content或max-content - 如果父容器是
display: flex，width会被flex-basis覆盖，此时改flex-basis才真正生效 - 没设
min-width: 0时，flex 项默认按内容最小宽度撑开，width: 60px会被忽略
必须配上的两个 CSS 属性：overflow 和 min-width
只写 width + transition，收起后文字/图标大概率还露在外面，或者根本压不下去。
-
overflow: hidden要加在侧边栏自身上，否则缩窄后内容会溢出边界 -
min-width: 0必须显式声明，否则 flex 子项会固守“至少显示文字宽度”的行为 - 过渡要包含
overflow：transition: width 0.3s ease, overflow 0.3s ease，否则收起瞬间会闪一下 - 避免
width: 0——它会让子元素布局崩溃（尤其含flex或inline-block的菜单项），用width: 60px（图标区宽度）更稳
width 动画和主内容区联动的坑
主内容区靠 margin-left 跟随侧边栏宽度变化，看似简单，但容易错位或重排失效。
- 不要用
flex: 1让主区自动填满——width变化时它不会响应式重分配空间 - 主区用
margin-left配合 transition：.main-content { margin-left: 240px; transition: margin-left 0.3s ease; } - 折叠类要精准作用于兄弟元素：
.sidebar.collapsed ~ .main-content { margin-left: 60px; }，注意选择器层级 - 若侧边栏是
position: fixed，主区就得用padding-left替代margin-left，否则 fixed 元素不占文档流
什么情况下还能勉强用 width 动画
不是完全不能用，但适用场景极窄——结构越简单、越少依赖 flex/grid、越不需要键盘焦点和屏幕阅读器支持，越可能成功。
- 纯图标导航（无文字）、无子菜单、无 hover 状态切换的桌面端侧边栏
- HTML 结构是扁平
<div> <button></button><button></button> </div>，没嵌套display: flex容器 - 用媒体查询控制宽度变化（如
@media (max-width: 768px) { .sidebar { width: 60px; } }），而非 JS 切类名 - 永远别写
width: -240px——CSS 不支持负宽，该声明直接被忽略
真正难的不是让宽度动起来，而是动完之后文字是否可读、图标是否对齐、Tab 键能否聚焦、屏幕阅读器是否能感知状态。这些细节一旦漏掉，用户一操作就卡住，而问题往往不出现在 width 行，而在 flex-shrink、white-space 或 aria-expanded 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
