Flexbox导航栏小屏换行错乱因flex-wrap默认nowrap且未设flex-shrink或white-space:nowrap；断点应依内容撑开宽度实测确定，推荐max-width单断点；汉堡菜单需JS控制可访问性类，点击区域须达44×44px标准。
Flexbox导航栏为什么在小屏上会换行错乱
因为 flex-wrap 默认是 nowrap，但一旦容器宽度不够，又没设 flex-shrink 或文字溢出控制，子项就会被强行压缩甚至撑破容器。更常见的是忘了给 a 标签设 white-space: nowrap，导致链接文字在窄屏里断行，高度突变，破坏对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给导航容器（如
.nav）明确设display: flex和flex-wrap: wrap，再配合justify-content: center或space-between - 每个导航项（
.nav-item）加flex-shrink: 0，防止被压缩变形 -
a标签统一加white-space: nowrap+text-decoration: none - 避免在
nav上用width: 100%同时又设max-width，容易触发意外的盒模型计算偏差
媒体查询断点怎么选才不踩坑
别直接抄别人写的 768px 或 992px。真实问题出在「内容撑开宽度」而非设备尺寸——比如导航有 6 个字的菜单项，那它实际开始换行的临界点可能在 520px，而不是平板通用断点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先写桌面端样式，然后不断缩小浏览器窗口，观察导航何时开始挤压/换行，记下那个像素值，作为你的断点
- 断点用
max-width而非min-width，更符合“从大到小适配”的逻辑，也避免移动端样式被桌面规则覆盖 - 一个导航栏通常只需要 1 个有效断点，加太多反而难维护；真需要多级响应（比如折叠成汉堡菜单），那是另一层交互逻辑，不该混在基础 Flex 布局里
折叠菜单（汉堡图标）和 Flex 导航能共存吗
能，但不能靠 Flexbox 自己完成折叠。Flex 只管布局，隐藏/显示、动画、焦点管理这些必须交由 JavaScript 配合 CSS 类切换。硬要用纯 CSS（比如 :checked + 隐藏 checkbox）也能跑，但可访问性差、无法键盘操作、iOS Safari 对伪元素点击支持不稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保持 Flex 导航结构不变，只用 JS 控制一个
.nav--expanded类加在nav上，CSS 里写.nav--expanded .nav-list { display: flex; } - 折叠状态下的
.nav-list设为position: absolute+top: 100%，别用display: none，否则屏幕阅读器会跳过整个导航 - 务必给汉堡按钮加
aria-expanded和aria-controls，点击后同步更新这两个属性值
移动端点击区域太小，用户总点不中怎么办
CSS 里写的 font-size: 14px，实际点击热区可能只有 16×16px，远低于 iOS 推荐的 44×44px 和 Android 的 48×48px。这不是“看起来小”，是系统级触摸判定失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
a.nav-link设padding: 12px 16px，再用line-height控制文字垂直居中，别只调font-size - 避免用
transform: scale(0.8)缩小整个导航栏来“适配小屏”，这会让点击区域同比例缩小 - 如果用了
rem单位，确保根字体大小在移动端没被意外重置（比如某些 UI 框架会在html上设font-size: 62.5%，但在 meta viewport 缺失时失效）
响应式导航真正的复杂点不在 Flex 写法，而在「什么时候该让导航换行」「换行后要不要保持一行高度」「用户点的是文字还是空白 padding 区域」——这些都得靠真实设备测试，不是看 Chrome DevTools 模拟器就能定的。
