弹性盒子中文字换行不规则主因是容器未控溢出与换行、flex-basis设置不当；应设overflow-wrap: break-word、flex-basis: 0、min-width: 0，并避免white-space: nowrap等干扰样式。
弹性盒子（Flexbox）中文字换行不规则，通常不是 Flex 本身导致的“换行错乱”，而是文本容器未明确处理溢出与换行行为，同时
设置不合理，使子项宽度不可控，进而影响文字折行位置。解决关键在于：**控制单行宽度 + 明确换行策略 + 合理设置 flex 缩放边界**。
确保容器支持自动换行（
word
-wrap /
overflow
-wrap）
默认情况下，英文单词或长连续字符（如 URL、
邮箱
）不会在非空格处断行，容易撑开容器或溢出。需显式启用断词：
用
（推荐）：在必要时强制在单词内断行，兼容性好（IE10+）
可选搭配
或
，但注意：
会无差别打断任意语言单词，中文也受影响，慎用
确保父容器有明确宽度（如
或固定
），否则
无生效前提
合理设置
防止宽度失控
是分配空间前的“基准尺寸”。若设为
（默认）且内容含长单词，
浏览器
可能按内容最长单词宽度计算，导致该 flex item 过宽，挤压其他项，间接破坏换行预期：
对文字容器，建议设
（配合
）让其按剩余空间均分，再由
或
约束
或直接设具体值，如
，再加
（防止内容撑大）——
尤其重要！
Flex item 默认
，会阻止收缩，必须手动设
才能让
生效
完整实用写法示例
一个常见场景：卡片标题在 flex 容器中换行异常
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
这样标题既能根据可用空间伸缩，又能在超长单词处安全折行，不破坏布局。
检查是否被其他样式干扰
以下常见设置会覆盖换行行为：
—— 强制单行，去掉即可
或
父元素未设宽度 —— 导致 flex 容器宽度不定，换行基准消失
未设
，padding/margin 影响实际可用宽度
flex-basisoverflow-wrap: break-wordword-break: break-wordword-break: break-allbreak-allmax-widthwidthbreak-wordflex-basisflex-basisautoflex-basis: 0flex-grow: 1max-widthmin-widthflex-basis: 200pxmin-width: 0min-width: automin-width: 0overflow-wrap.card {
display: flex;
align-items: center;
}
.title {
flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
min-width: 0; /* 关键！允许收缩 */
overflow-wrap: break-word;
word-break: keep-all; /* 中文不断字，英文按单词断 */
margin: 0;
}white-space: nowrapdisplay: inline-flexinlinebox-sizing: border-box