导航菜单错位主因是flex项默认收缩导致压缩换行，解决关键在于用min-width锁定最小可读宽度（如120px）并搭配white-space: nowrap，再通过媒体查询在特定断点（如≤768px）主动控制换行与竖排。
导航菜单在缩放或小屏幕下突然换行、错位，通常不是代码写错了，而是 flex 项默认不控制最小宽度，导致浏览器强行压缩后触发换行。关键不在“要不要换行”，而在“什么时候换行才合理”。
flex-wrap 的作用是允许换行，但不是解决错乱的万能开关
很多人一看到换行就加 flex-wrap: wrap，结果菜单在中等宽度下就碎成两行，体验反而更差。它只是打开了“可以换行”的权限，真正决定何时换行的是每个菜单项的宽度表现。
- <li> 默认情况下，flex 项会尝试收缩（
flex-shrink: 1），文字多的项被压窄，可能触发内部文字折行或溢出 <li> 加上 flex-wrap: wrap 后，若容器宽度不够，整项会被挤到下一行——但前提是它没被过度压缩到无法识别
<li>所以单靠 flex-wrap 治标不治本，必须配合宽度约束
用 min-width 锁住菜单项基本可读宽度
给 <li> 或 <a></a> 设置一个合理的 min-width，比如 min-width: 120px，就能防止文字被压得太扁而折行或重叠。
- <li>数值建议按最长菜单文字 + 内边距估算，例如“产品中心”+左右各 16px → 约 110–130px
<li>搭配 white-space: nowrap 可避免链接文字自身换行
<li>如果用 flex: 1 均分宽度，记得改用 flex: 1 0 min-width（即 flex-shrink: 0）来禁用收缩
响应式兜底：用媒体查询主动控制换行时机
与其让浏览器在尴尬宽度下“被迫换行”，不如明确告诉它：“宽度 ≤ 768px 时才允许换行，并调整为竖排样式”。
立即学习“前端免费学习笔记（深入）”；
- <li>桌面端保持
flex-wrap: nowrap + 固定最小宽，确保一行整齐 <li>移动端用 @media (max-width: 768px) 切换为 flex-wrap: wrap，并设置 flex-direction: column 或调整项高宽
<li>这样换行有节奏、有预期，不会在 980px、1024px 这类临界点突然崩掉
基本上就这些。flex-wrap 不是修理工，min-width 才是定海神针，再加上响应式收口，导航栏就能在各种尺寸下稳住队形。