flex-wrap: wrap写了却不换行，主因是父容器宽度被min-width锁死或子项flex-basis/min-width设置不当；需检查computed width与min-width是否相等、移除框架默认min-width、设width: 100%、子项加min-width: 0并配overflow-wrap: break-word。
flex-wrap: wrap 写了但还是不换行？先查父容器宽度是否被锁死
最常见的假象是“写了 flex-wrap: wrap 却没效果”，实际是父容器被 min-width 或固定 width 卡住了——比如用了 Bootstrap 的 .container 类，它自带 min-width: 576px，哪怕视口缩到 320px，容器宽度也不变，子项自然没机会换行。
用开发者工具看父容器的 computed width 和 min-width：如果两者接近甚至相等，说明它根本没随屏幕收缩。解决方式很简单：
- 移除所有
min-width（尤其是框架类名带的） - 确保父容器有
width: 100%或max-width: 100%，别依赖默认行为 - 避免在父容器上设
display: inline-flex，它会按内容宽度计算，不响应视口
子项死活不肯折行？检查 flex-basis 和 min-width 的隐性冲突
即使父容器宽度正常，子项也可能因自身约束拒绝压缩。典型表现是三列卡片在窄屏下变成一列一卡，而不是两列并排。
flex: 0 0 auto 或 flex: 0 0 100% 是罪魁祸首——它们让子项无视空间限制，硬占满可用宽度。更稳妥写法是：
- 用
flex: 1 1 200px：允许拉伸也允许收缩，基准宽度设为合理最小值（如卡片常用 200px） - 显式加
min-width: 0：解除子项默认的min-width: auto锁定，这是换行的隐性开关 - 慎用
min-width: 250px：它会成为换行的实际门槛，比flex-basis优先级更高，容易导致“明明够宽却还折行”
文字撑破容器、URL 不断行？overflow-wrap 被 flex-wrap: nowrap 压制了
就算你给子项写了 overflow-wrap: break-word，只要父容器没设 flex-wrap: wrap（默认就是 nowrap），浏览器就会优先执行“单行压缩”，文本换行逻辑直接被忽略。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
必须同时满足两个条件才生效：
- 父容器设
flex-wrap: wrap - 子项设
min-width: 0+overflow-wrap: break-word
对超长无空格字符串（如 base64、长 URL），可额外加 word-break: break-all 作兜底，但别全局滥用——中文场景下它会无差别断字，阅读体验受损。
换行后行与行之间没空隙？align-content 不是 row-gap
align-content 在多行 Flex 中常被误当作“设置行间距”的快捷方式，但它只在容器交叉轴有剩余空间时才起作用。如果容器高度由内容撑开（height: auto），align-content 就完全无效。
真要控制行间距离，优先用 row-gap：
-
row-gap: 12px：每两行之间严格留出 12px 空白，和容器高度无关 -
align-content: space-around：适合需要整体分布控制的场景（如首尾行贴边、中间均匀分隔） - 别用
align-content: stretch来“假装有空隙”，它会把每行拉伸填满容器，破坏卡片等高一致性
最常被忽略的是：flex-wrap: wrap 只是“允许换行”的开关，真正决定何时换、怎么换的，是父容器宽度 + 子项的收缩能力 + 文本断行策略——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
