用 CSS width + transition 配合 JS 切换 class 实现侧边栏收放，避免 transform 导致主内容区无法自动撑满；需设 aside flex-shrink: 0、main flex: 1，宽度变化触发 Flex 重分配。
直接用 CSS width + transition 配合 JavaScript 切换 class 就能实现，不需要框架、不依赖 transform 位移——后者会导致主内容区无法自动撑满，是初学者最常踩的坑。
为什么不能只用 transform: translateX()
因为 transform 只改变渲染位置，不释放文档流空间。侧边栏即使“滑走”，.main-content 依然被它占着宽度，不会自动扩展。
- 现象：折叠后右侧留白，主区域宽度不变
- 本质：Flex 容器没收到宽度变化通知，
flex: 1不触发重分配 - 替代方案必须动布局属性：
width、margin-left或flex-basis
width + transition 是最稳的组合
直接控制侧边栏容器的 width，配合 overflow: hidden 防文字溢出，动画顺滑且布局响应及时。
- 展开态设为
width: 220px，折叠态设为width: 64px（刚好容下图标） - CSS 中必须写
transition: width 0.3s ease-in-out，不能只靠 JS 切 class - 记得给侧边栏加
flex-shrink: 0，防止 Flex 容器在窄屏下强行压缩它 - 图标文字共存时，用
opacity和visibility控制文字显隐，别用v-if或display: none，否则过渡会断帧
主内容区怎么自动撑满？
靠 Flex 布局本身就能解决，前提是父容器是 display: flex，且主内容区设 flex: 1。
- 结构必须是：
.layout { display: flex; }-
aside { flex-shrink: 0; }（锁定不压缩） -
main { flex: 1; }（自动吃掉剩余所有空间） - 不要给
main写固定width或margin-left，那会和 Flex 冲突
真正容易被忽略的是折叠后图标的对齐精度——64px 宽度下，如果图标没居中或上下留白不对，视觉上就会“歪”。建议用 padding-top: 16px + text-align: center + line-height: 48px 这套组合稳住图标垂直居中，比 flex 嵌套更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
