必须配max-height动画，因height:auto无法触发css过渡；应设max-height:0→足够大的固定值（如300px）并配合overflow:hidden，避免卡顿与内容溢出。
flex-direction: column 在移动端为何必须配 max-height 动画
直接写 height: auto 无法触发 CSS 过渡，浏览器不支持对 auto 值做插值计算。所以折叠菜单用 max-height 是唯一稳定方案。
常见错误是设 max-height: 0 → max-height: 500px，但实际内容高度可能只有 120px，导致动画末尾明显“卡顿”。更稳妥的做法：
-
max-height初始值设为0，展开时设为足够大的固定值（如max-height: 300px），确保所有可能菜单项都能容纳 - 配合
overflow: hidden，否则超出部分仍会显示 - 过渡只写
max-height和opacity，别加height或display
为什么不能对
语义丢失：屏幕阅读器会跳过整个 <nav></nav>，用户无法感知导航存在；键盘焦点也断开，Tab 键直接跳过。
正确做法是保持 <nav></nav> 始终在 DOM 中，仅控制其子容器（如 .nav-list）的可见性：
- 默认状态：
.nav-list { display: flex; flex-direction: row; } - 移动端折叠后：
.nav-list { display: flex; flex-direction: column; max-height: 0; overflow: hidden; } - 展开时加类：
.nav-list.is-open { max-height: 300px; }
同时必须同步更新 aria-expanded 和 aria-controls 属性，否则辅助技术无法识别状态变化。
flex-direction: row → column 切换时，align-items 和 justify-content 的行为差异
主轴方向变了，两个属性的作用轴就互换了——这常被忽略，导致对齐“突然错位”。
例如桌面端写 justify-content: space-between; align-items: center;，意思是“左右撑开、垂直居中”。一旦切到 flex-direction: column，justify-content 就变成控制**垂直方向**的间距，align-items 控制**水平方向**对齐。
所以移动端要重新校准：
- 若希望菜单项顶部对齐、水平居中：保留
justify-content: flex-start，改align-items: center - 若希望菜单项底部对齐：用
justify-content: flex-end，不是align-items: flex-end - 别依赖 desktop 端的
justify-content: space-between在 column 下自动适配——它会把第一项顶到顶部、最后一项压到底部，中间留空
移动端用 flex-direction: column 后，子项文字换行异常怎么办
Flex 子项默认 min-width: auto，但在 column 方向下，长文本或带图标的菜单项容易撑宽容器，尤其 Safari 会错误计算换行点。
关键修复项：
- 给每个菜单项（如
.nav-item）加min-width: 0，强制允许收缩 - 避免在
a标签上设width或flex-basis，改用flex: 0 1 auto（不增长、可收缩、按内容定宽） - 加
white-space: nowrap防止意外断词，再配合overflow: hidden; text-overflow: ellipsis;处理超长文本 - 测试时重点看 320px 宽度下是否出现横向滚动条——那是
min-width没生效的明确信号
真正难处理的不是布局切换，而是 flex-direction 变更后，所有对齐、换行、收缩逻辑都得重验一遍。很多人只测了“能展开”，没测“展开后能不能正常读、能不能键盘操作、小屏下会不会溢出”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
