Flex 导航小屏不换行因默认 flex-wrap: nowrap，需显式设 wrap；折叠无效因 DOM 结构缺失或 CSS 未隐藏；Safari 失灵因 transform 过渡未配 will-change 或 JS 绑定时机错；背景变灰不能滚动因 body overflow 未恢复。
用 flex 布局导航栏时，为什么在小屏下不自动换行？
因为 flex 默认是 flex-wrap: nowrap，子项宁可溢出也不折行。移动端空间有限，必须显式开启换行，否则导航项会挤成一团甚至被截断。
- 给导航容器（如
.nav）加flex-wrap: wrap - 同时设
justify-content: center或space-between控制对齐，避免换行后左右留白难看 - 别只依赖
flex: 1给菜单项——它在窄屏下可能把文字压成“……”，应配合min-width: max-content或固定最小宽度
媒体查询里写 @media (max-width: 768px) 为什么折叠按钮没反应？
常见原因是 HTML 结构没预留“折叠态”入口，或者 CSS 没隐藏原生导航项。响应式折叠不是靠媒体查询“变出来”菜单，而是切换两套 DOM 状态：桌面显示完整导航，移动端只显示按钮 + 隐藏导航 + 点击展开。
- HTML 中必须有
<button class="nav-toggle"></button>和包裹导航的<nav class="nav-menu"></nav> - 在
@media (max-width: 768px)里，给.nav-menu加display: none，再用 JS 切换active类控制显隐 - 别用
visibility: hidden替代display: none——它仍占布局空间，点击区域错位
Flex 导航在 Safari 上折叠后点击无响应，是什么原因？
Safari 对 transform 和 opacity 的过渡渲染更敏感，如果用它们做展开动画但没配 will-change: transform，或 JS 事件绑定时机不对，就容易失灵。
- 确保点击按钮时，JS 是操作
.nav-menu的classList.toggle('show')，而不是直接改style.display - 对应 CSS 中用
.nav-menu.show {display: flex;}，不要混用opacity+height动画——height: 0到auto无法过渡 - 在
.nav-menu上加transition: max-height 0.3s ease-in-out并配合overflow: hidden，比纯display切换更平滑且兼容 Safari
移动端点击折叠菜单后，背景变灰、页面不能滚动，怎么解？
这是为了防穿透而加了 body {overflow: hidden}，但漏掉了恢复逻辑，或者没处理触摸设备的 touchmove 阻止。
立即学习 “ 前端免费学习笔记（深入）”；
- 在 JS 中，菜单打开时加
document.body.style.overflow = 'hidden'，关闭时务必设回''（不是'auto'，避免 iOS 强制重绘） - 如果用了
position: fixed覆盖层，记得给它加touch-action: none，否则部分安卓机型会触发底层页面滚动 - 别在
click里直接preventDefault()—— 它会干掉按钮默认聚焦行为，影响可访问性；改用pointer-events: none控制覆盖层交互即可
实际最难调的不是 flex 或媒体查询本身，而是 Safari 的渲染节奏和 touch 事件与 scroll 的竞争关系。真要稳，就少依赖 height 过渡，多用 max-height + overflow，JS 切类名时加个 requestAnimationFrame 确保样式计算时机。
