必须配合white-space: nowrap和flex-wrap控制，因flex-shrink: 0仅阻止宽度压缩，不干预文本换行逻辑；若导航项white-space为normal或父容器未设flex-wrap: wrap，文字仍会换行。
直接给导航项设 flex-shrink: 0 不够，必须配合 white-space: nowrap 和对父容器 flex-wrap 的明确控制——否则窄屏下文字要么被压成两行，要么撑破布局。
为什么只加 flex-shrink: 0 还是换行
常见错觉是“关掉收缩就万事大吉”，但实际中：flex-shrink: 0 只阻止宽度压缩，并不干预文本渲染逻辑。如果导航项内部文字本身在当前宽度下已触发换行条件（比如默认 white-space: normal），浏览器仍会断行。
- 检查 computed 样式里
white-space是否真为nowrap，而非从祖先继承的normal -
flex-shrink: 0后若内容超宽，可能横向溢出或触发滚动——这不是换行问题，而是布局失控 - 某些 UI 框架（如 Ant Design）的
.ant-menu-item默认带flex: none，会覆盖你写的flex-shrink: 0，需提高选择器权重
flex-wrap: wrap 必须显式声明
导航容器默认是 flex-wrap: nowrap，哪怕屏幕再窄，所有项也死扛在一行。这时 flex-shrink: 0 反而加剧溢出，因为项既不缩也不折行。
- 给
<nav></nav>或<ul class="nav"></ul>加flex-wrap: wrap，这是换行发生的前提 - 换行后多行对齐用
align-content: flex-start（不是align-items），否则第二行可能居中悬空 - Safari 旧版本对
flex-wrap支持不稳定，可加-webkit-flex-wrap: wrap兜底
响应式下文字突然换行的真正原因
不是 flex-shrink 失效，而是可用宽度被 padding/border/字体大小吃掉了。尤其小屏时，16px 字体 + 12px padding 很容易让一个“首页”按钮实际需要 >100px 宽度，而容器只分给它 80px。
- 用
min-inline-size: 80px替代min-width: 80px，它计算包含 padding 和 border - 配
box-sizing: border-box，避免 width + padding 叠加超限 - 媒体查询里同步调小
font-size和padding，比如@media (max-width: 480px) { .nav-item { font-size: 14px; padding: 6px 10px; } } - 禁用
word-break: break-all或hyphens: auto——它们会让“联系我们”变成“联-系-我-们”，比换行更糟
按钮类导航项要额外防坑
<button></button> 元素自带 inline-level 行为，直接设 display: flex 会让内部文本变成 flex item，white-space: nowrap 对它的约束力下降。
- 改用
display: inline-flex，保留按钮语义且不干扰文本流 -
white-space: nowrap必须加在按钮自身上，而不是里面<span></span>或图标上 - 避免同时写
width: 100px和flex: 1，两者冲突时浏览器行为不可预测 - 图标+文字组合时，图标元素若设了
flex-shrink: 0，要确认没意外拉宽整个按钮（比如图标用了width: 24px但父容器未限制）
最常被忽略的是：窄屏下是否真需要“不换行”——有时让导航项折行比强行单行更合理；而所谓“防止换行”，本质是控制换行时机和方式，不是消灭它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
