flex-wrap: wrap 能折行的前提是父容器设 display: flex 且无 min-width 或 white-space: nowrap 干扰；常见错误是只改子项样式而忽略容器控制，折行由容器决定而非子项。
直接加 flex-wrap: wrap 就能折行，但多数人漏了前提：父容器必须是 display: flex，且不能有 min-width 或 white-space: nowrap 拦着它。
为什么写了 flex-wrap: wrap 还不换行？
常见错误是只改子项（比如给 li 加样式），却忘了控制父容器。折行行为由容器决定，不是子项自己能触发的。
-
flex-wrap只对display: flex或display: inline-flex的容器生效 —— 漏写display: flex是最常踩的坑 - 如果父容器或子项设了
min-width（比如min-width: 200px），哪怕屏幕只剩 320px，所有项也会硬挤在一行，撑破容器 -
white-space: nowrap在父容器上会阻止文字内联换行，在子项上可能让单个链接文字溢出，间接阻碍整体折行
怎么写才真能自动折行？
关键不是“加什么”，而是“删什么 + 设什么”。移动端默认状态就该是可折行的，桌面端再用媒体查询拉平。
- 给导航容器（如
.nav-menu）设display: flex和flex-wrap: wrap（显式声明，别依赖默认值） - 移除所有
min-width、white-space: nowrap、flex: 1类似强制伸缩的规则 - 子项（如
.nav-link）用flex: 0 0 auto，让它按内容宽度自然收缩，不抢空间也不被压扁 - 用
gap: 0.75rem控制项间距，比margin-right更干净，首尾无多余空白
折行后对齐和间距怎么调？
折行后若出现左右留白不均或项数少时散开，光靠 justify-content 不够，得结合容器宽度和子项行为一起控。
-
justify-content: center适合项数少、居中显示；justify-content: flex-start更稳妥，避免小屏下项数变化导致布局跳动 - 别给子项设固定
width，否则折行后高度不一致（比如有的两行、有的单行），视觉割裂 - 如果项文字长度差异大，可加
min-width: max-content防止过窄压缩，但要测试 iOS Safari 14 及更早版本（它们对max-content支持不稳定） - 旧安卓 WebView 对
gap兼容差，可降级为justify-content: space-between+ 显式控制首尾项margin
真正难的不是让项折行，而是折行后仍保持可点区域 ≥44px、焦点流不中断、屏幕阅读器能顺序读取。这些没法靠 flex-wrap 自动解决，得靠语义 HTML + padding + aria-current 补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
