flex-wrap: wrap不换行是因为未同时满足三条件：父容器必须为Flex容器（display: flex）、有明确宽度限制、子项能收缩（如min-width: 0）；任一缺失都会导致换行逻辑不触发。
flex-wrap: wrap 写了但子元素就是不换行，大概率不是属性写错了，而是浏览器根本没触发换行逻辑——它只在“放不下”时才折行，而“放不下”的判断依赖三个硬性条件是否同时满足。
检查父容器是否真正进入 Flex 上下文
flex-wrap 是个“寄生属性”，单独存在完全无效。它必须和 display: flex 或 display: inline-flex 同时作用于同一父元素才起效。
- 用开发者工具打开“计算样式”面板，确认父容器的
display值确实是flex，而不是被float、position: absolute、display: contents或第三方 CSS 重置成了block - 特别注意
<form></form>、<table> 这类原生元素，它们有默认 <code>display值，不显式写display: flex就不会进 Flex 模式 - 如果用了 Tailwind，确保写了
flex类（对应display: flex），不能只写flex-wrap - 常见失效场景：
直接子元素设display: flex，但没设width；或父级是inline-block，导致宽度坍缩 - 加一条
width: 100%或max-width: 600px是最直接的验证方式 - 用绝对定位包裹 Flex 容器时，记得给该定位父级也设
width，否则 Flex 容器宽度可能算出 0 - 检查子元素是否设了
flex-shrink: 0、white-space: nowrap或min-width（比如min-width: 250px） - 图片默认不缩放，需配
max-width: 100%和height: auto；长 URL 或 token 需加overflow-wrap: break-word或word-break: break-all - 表单控件（如
<input>）、<img alt="为什么CSS Flex设置flex-wrap后仍不换行？" >、带文字的<div> 建议统一加 <code>min-width: 0，解除 CSS Flex 规范中min-width: auto的锁定行为为什么 computed 样式里显示 wrap 却还是不换行？
因为
flex-wrap: wrap不是“强制断行”，而是“空间不足时响应式折行”。它是否生效，最终取决于浏览器对“当前行剩余空间能否容纳下一个子项”的实时计算。- 这个计算受
flex-basis、flex-shrink、边框/内边距/外边距、字体渲染宽度等共同影响 - Safari iOS 15–16 和 IE11 对
flex-basis: 100%计算偏差大，容易误判“还有空间” - 真机测试最小视口宽度下的换行点是否准确——这是唯一能暴露尺寸逻辑漏洞的方式
真正卡住的从来不是那行
flex-wrap: wrap，而是父容器宽度、子项弹性行为、内容可压缩性三者之间有没有形成稳定且可预测的“换行触发边界”。 - 这个计算受
确认容器是否有明确宽度限制
Flex 容器默认会尽可能拉宽自己。没有 width、max-width 或外层约束时，它可能撑成无限宽，“永远够放”，flex-wrap 就永远不会启动。
排查子元素是否“拒绝收缩”
即使容器宽度有限，只要某个子项的最小宽度超过可用空间，浏览器就认为“还能塞下”，换行条件依然不成立。
立即学习“前端免费学习笔记（深入）”；
