flex-wrap: wrap 不换行的根本原因是子项默认 min-width: auto 拒绝收缩，必须显式设 min-width: 0、父容器有明确宽度约束、断点经实测确定，三者缺一不可。
flex-wrap: wrap 不是“加了就自动换行”，而是必须配合子项可收缩、父容器有明确约束、断点实测这三件事，否则在窄屏下大概率溢出或压缩变形。
为什么写了 flex-wrap: wrap 却不换行
根本原因不是属性没生效，而是子项拒绝收缩——浏览器默认给每个 flex 项设了 min-width: auto，它会死守文字内容宽度，宁可撑破容器也不折行。
- 给导航项（如
.nav-links a或.nav-item）显式加min-width: 0，这是换行的前提 - 删掉
white-space: nowrap（除非你同时配了overflow: hidden+text-overflow: ellipsis） - 避免只写
flex: 1：它等价于flex: 1 1 0，强制拉伸填满，锁死换行机会；改用flex: 1 1 auto或flex: 0 1 calc(25% - 8px) - 检查父容器是否被
max-width或overflow: hidden截断，这会让 Flex 引擎误判可用空间
小屏下换行后对齐错乱、高度不一致
多行 flex 容器里，align-items 和 align-content 容易混淆，导致菜单项上下参差、行间距失控。
-
align-items: stretch（默认）会让每行内所有项拉高到该行最高项——卡片类导航常见“高度不齐”，改用align-items: flex-start就齐头了 -
align-content只对多行生效，控制的是“行与行之间”的分布：flex-start贴顶、center整体居中（需容器有明确height） - 别给导航项设固定
height：内容少时留白难看；真要等高，display: grid比 flex 更稳 - 若换行后垂直不对齐，给容器加
align-items: center即可
断点怎么设才不翻车
抄 @media (max-width: 768px) 是最常踩的坑——断点不是设备尺寸，是你导航内容开始撑不开的临界宽度。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools，把浏览器窗口从大往小拖，盯住导航栏：哪一刻文字首次换行、图标错位、间距突变？记下那个像素值
- 优先用
@media (max-width: XXXpx)，不是min-width，避免移动端样式被桌面规则覆盖 - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iPad 等设备会回退到桌面视口，所有max-width查询失效 - 多数导航只需 1 个有效断点；真要分 iPad 横竖，那是交互逻辑问题，不该靠 CSS 布局硬切
最容易被忽略的是：换行只是表象，真正决定成败的是 min-width: 0 是否落到每个可换行的子项上，以及断点是否来自实测而非猜测。Safari 错位、iOS 折叠失效、文字截断不一致……这些问题背后，90% 都卡在这两点上。
