flex元素换行主因是flex-wrap被覆盖或未设nowrap；即使nowrap，子项溢出因flex-shrink失效、min-width未重置或固定宽高导致；需检查计算样式并配合flex-shrink:1、min-width:0及overflow控制。
flex 元素还是换行了？检查 flex-wrap 是否被覆盖
默认情况下，flex 容器的 flex-wrap 值是 nowrap，所以“不换行”其实是默认行为。如果你发现元素仍在换行，大概率是父容器显式设置了 flex-wrap: wrap，或者被 CSS 重置规则、框架（如 Bootstrap）或继承样式干扰。
- 用浏览器开发者工具检查该容器的 computed 样式，重点看
flex-wrap实际值是否为nowrap - 确认没有其他选择器（比如通配符
* { flex-wrap: wrap; }）或层叠更高的规则覆盖它 - 注意：某些 UI 库（如 Ant Design 的
.ant-row）内部会强制设flex-wrap: wrap，需针对性覆盖
即使 flex-wrap: nowrap，子项仍“挤出容器”？可能是尺寸失控
flex-wrap: nowrap 只禁止换行，不阻止内容溢出。如果子项总宽度超过容器，它们会横向撑开或溢出，看起来像“错位”，实则是未收缩导致的。
- 给子项设置
flex-shrink: 1（默认值），确保能压缩；若设了flex-shrink: 0，就会拒绝缩小，强行溢出 - 避免对子项使用固定宽高（如
width: 200px）且数量多，应优先用flex: 1或flex: 0 1 auto让其弹性适配 - 检查是否意外设置了
white-space: nowrap在文本内，导致单行文本过长推挤布局
需要强制单行 + 溢出隐藏？补上 overflow 和 min-width
仅靠 flex-wrap: nowrap 不足以实现“单行截断”效果。必须配合溢出控制和最小尺寸约束，否则在小屏下可能完全不可见。
div.container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto; /* 允许横向滚动 */
min-width: 0; /* 关键：重置 flex 最小尺寸限制，否则子项可能不收缩 */
}
div.container > {
flex-shrink: 1;
min-width: 0; / 防止内容（如长单词/URL）阻断收缩 */
}
-
min-width: 0在 flex 容器和子项上都常需显式设置，否则浏览器会按内容自然宽计算最小尺寸，导致flex-shrink失效 - 若要隐藏溢出而非滚动，把
overflow-x: auto换成overflow-x: hidden，但注意内容将不可见 - 慎用
text-overflow: ellipsis—— 它只对块级单行生效，需配合white-space: nowrap+overflow: hidden+ 固定宽，不能直接用于 flex 子项本身
用 flex-basis 控制单行内排列密度
当所有子项都设为 flex: 0 0 auto，它们按内容宽排列，容易因内容长度差异造成空隙不均；想均匀铺满又保持单行，得主动干预基础尺寸。
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 calc(100% / 3)强制三等分（注意：需配合整数个子项，且无间隙） - 更稳妥的是
flex: 1（即flex: 1 1 0），让每个子项平均瓜分剩余空间，同时允许收缩 - 若子项含图片或 iframe，记得设
max-width: 100%和height: auto，防止固有尺寸破坏布局
真正卡住的往往不是 flex-wrap 这一行声明，而是 min-width 的隐式行为、flex-shrink 被设为 0、或外部框架的预设样式。动手前先看 computed 样式，比反复改 nowrap 有用得多。
