flex-basis动画默认不生效因auto无法插值，需设具体值；折叠用flex-basis:0+overflow:hidden；结构须侧边栏与主内容为同一flex父容器直接子元素；切换状态只改class内flex-basis和overflow；按钮触控区不小于44px。
flex-basis 动画为什么默认不生效
直接给 flex-basis 加 transition，菜单缩进/展开时大概率卡顿或完全没动画——因为 flex-basis 的初始值常为 auto，而 auto 无法参与数值插值动画。
- 必须显式设为具体长度（如
240px或0px），不能依赖auto - 折叠状态建议用
flex-basis: 0+overflow: hidden，而非display: none（后者会中断 transition） - 若内容区用
flex: 1，侧边菜单需固定flex-shrink: 0，否则 flex 容器可能压缩它导致尺寸错乱
折叠菜单的 HTML 结构怎么写才利于 flex 控制
结构松散或嵌套过深会破坏 flex 布局流，导致 flex-basis 失效或响应错位。
- 侧边菜单和主内容必须是同一父容器的直接子元素，且父容器设
display: flex - 避免在菜单内部再套一层
div后又设display: flex——这会创建新 flex 上下文，隔离外部控制 - 推荐结构：
<div class="layout"> <aside class="sidebar"></aside> <main class="content"></main> </div>
如何用 CSS 切换折叠状态而不触发重排
靠 JS 切换 class 是最稳的方式，但 class 名和属性组合稍有不慎就会引发 layout thrashing。
- 只切换一个 class（如
.sidebar--collapsed），不要同时改多个样式属性 - 该 class 内只改
flex-basis和overflow，别碰width、transform等触发重排的属性 - 过渡时间建议用
transition: flex-basis 0.3s ease-in-out，避免加all——它会把所有变化都拖进动画，包括浏览器自动生成的 margin/padding
移动端点击区域太小导致折叠失败怎么办
折叠按钮常被放在菜单顶部或角落，手指点按容易误触或无响应。
立即学习“前端免费学习笔记（深入）”；
- 给触发按钮加
min-width: 44px和min-height: 44px（iOS 触控最小推荐尺寸） - 如果按钮是图标，用
::before伪元素撑开点击热区，而不是只靠 icon 字体大小 - 确保折叠逻辑监听的是
click，不是touchstart——后者在快速连点时可能触发两次，导致状态混乱
flex-grow/flex-shrink 组合与媒体查询断点之间的隐性冲突。一旦在某个屏幕宽度下菜单突然“弹跳”或留白异常，八成是这里没对齐。 
