Flex导航栏手机端挤成一团的根源是flex-wrap: nowrap默认不换行，需显式设wrap或改column；汉堡菜单失效多因DOM结构缺失或CSS隐藏不当，Safari需加will-change并确保DOM加载完成。
Flex导航栏在手机端挤成一团，根本不是“没加媒体查询”，而是默认的 flex-wrap: nowrap 在窄屏下强行把所有项压进一行——它宁可文字缩成“…”、按钮重叠、甚至溢出屏幕，也绝不会自动换行。
为什么小屏下不换行？flex-wrap 默认是 nowrap
Flex容器默认行为就是单行排列，哪怕子项总宽度远超容器。移动端空间有限，必须显式告诉它：“可以折”。
- 给导航容器（如
.nav或nav）加flex-wrap: wrap - 同时配
justify-content: center或space-between，避免换行后左右大片留白 - 别只靠
flex: 1均分——它在窄屏下会无限压缩文字，应加min-width: max-content或固定最小宽度（如min-width: 120px）
用 flex-direction: column 替代换行更可控
靠 wrap 换行在中等屏幕（比如 800–900px）容易忽高忽低、对齐错乱。直接切竖排，逻辑更干净，点击热区也更大。
- 桌面端：默认
flex-direction: row - 小屏下（如
@media (max-width: 768px)）：设flex-direction: column，并确保容器有display: flex - 每个菜单项加
width: 100%和padding: 16px 20px，手指好点 - 用
gap: 4px控制项间距，比margin-bottom更稳定
汉堡菜单展开后仍挤在一起？DOM结构或CSS隐藏失效
纯CSS实现折叠时，常见问题是HTML结构没预留“折叠态”入口，或CSS没真正隐藏原生导航项。
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须有独立的按钮（如
<button class="nav-toggle"></button>）和包裹菜单的容器（如<nav class="nav-menu"></nav>） - 媒体查询里，给
.nav-menu设display: none；JS 点击时只切.nav-menu.show类，不要直接操作style.display - 对应 CSS 写
.nav-menu.show { display: flex; flex-direction: column; }，别混用opacity+height动画——height: 0到auto无法过渡
Safari上折叠失灵？will-change 和事件绑定时机很关键
Safari 对 transform 和 opacity 的过渡渲染更敏感，漏掉关键声明就容易卡住。
- 在
.nav-menu上加will-change: transform，提前告知浏览器要动画 - JS 绑定事件时，确保 DOM 已加载完成——别在
<head>里执行，或用DOMContentLoaded包裹 - 过渡用
max-height+overflow: hidden比纯display切换更平滑，且兼容 Safari
真正麻烦的从来不是“怎么让它换行”，而是换完之后：有没有意外触发横向滚动、首屏是否被遮挡、点击区域是否够大——这些细节不一个个手动调，光靠一个 flex-wrap 解决不了。
