用 display: flex 构建响应式导航栏需严控 min-width、flex-wrap 和 viewport 声明；设 min-width: 0、移除 white-space: nowrap、用 flex: 1 1 auto 替代 flex: 1；汉堡菜单需显式声明 .nav-menu.active { display: flex; }，配合 position: absolute 和 z-index；桌面端用 margin-left: auto 实现左右分布；务必添加 viewport meta 标签。
用 display: flex 搭配合理断点和基础约束就能快速构建可用的响应式导航栏，但“快速”不等于跳过关键控制点——多数失败案例都卡在 min-width、flex-wrap 和 viewport 声明这三处。
为什么加了 flex-wrap: wrap 还是不换行？
Flex 项默认 min-width: auto，会死守内容宽度（比如长菜单文字），宁可溢出也不折行。
- 给导航项（如
.nav-link或li）显式设min-width: 0 - 删掉可能存在的
white-space: nowrap—— 它会锁死单行 - 避免滥用
flex: 1；改用flex: 1 1 auto，允许收缩 - 检查父容器是否被
overflow: hidden或max-width意外截断
移动端汉堡菜单点不开，大概率不是 JS 写错了
而是 CSS 类名没对上，或 display 没显式声明。
- JS 切换的是
.nav-menu.active，CSS 就必须写.nav-menu.active { display: flex; }，不能只靠继承 -
.nav-menu建议加position: absolute+top: 100%（或top: 0），并设z-index: 1000 - 检查父级（比如
.header）有没有overflow: hidden，有就改成overflow: visible - 别用
display: none隐藏菜单——它会让屏幕阅读器跳过整个导航；改用clip-path: inset(100%)+aria-hidden="true"
桌面端左右分布（logo 左、按钮右）最简方案
不用额外 wrapper，也不用 float 或 position: absolute，靠一个 margin-left: auto 就能推过去。
- 把
<nav></nav>设为display: flex，子元素自然沿主轴排布 - 让 logo 和菜单
<ul></ul>正常排列，然后给最后一个子元素（如登录按钮）加margin-left: auto - 确保
<nav></nav>有align-items: center，否则 logo 和文字高度不一致时会错位 - 如果菜单项太多撑开，加
flex-wrap: nowrap+overflow-x: auto比强制换行更可控
真正容易被忽略的是：Safari 对 min-width: 0 的解析在旧版本中不稳定，且所有媒体查询都依赖正确的 <meta name="viewport" content="width=device-width, initial-scale=1"> —— 没它，@media (max-width: 576px) 在真机上根本不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
