根本原因是漏了flex-wrap: wrap，Flex容器默认flex-wrap: nowrap，即使子项总宽超容器也强制单行溢出；必须同时设置display: flex和flex-wrap: wrap，并确保子项可收缩、父容器有明确宽度。
Flex容器默认不换行，加了flex但内容仍挤成一行或横向溢出，根本原因几乎总是漏了flex-wrap——不是宽度不够，也不是子项写错了，而是换行行为本身被禁用。
为什么写了 flex 还是不换行
因为flex只等价于display: flex，不带flex-wrap: wrap。浏览器默认按flex-wrap: nowrap处理，子项再宽也硬塞，撑容器、截文字、出滚动条都是典型表现。
- 检查父容器是否同时写了
flex和flex-wrap（缺一不可） - 确认没意外加上
flex-nowrap或whitespace-nowrap这类锁死行为的类 - 子元素若含长URL、未约束的
img或固定宽组件（如w-64），即使有flex-wrap也可能因无法收缩而“假装没换行”
flex-wrap 必须搭配 min-w-0 或显式宽度才能生效
Flex子项默认有min-width: auto，浏览器会优先保持内容完整，宁可撑宽也不折行。光靠flex-wrap不够，得让子项“愿意缩”。
- 对纯文本块，加
min-w-0+break-words（防止单词撑爆） - 对卡片/按钮等区块，用
w-1/2、w-48等固定宽度类明确限制尺寸 - 避免
flex-shrink-0——它会直接禁用收缩，换行逻辑彻底失效 -
max-w-full对图片、嵌入内容必不可少，否则原始尺寸压倒flex计算
响应式换行别靠猜，用断点类覆盖默认行为
想小屏竖排、大屏横排自动换行？不能只写flex-wrap，得用断点前缀控制生效时机，且注意覆盖顺序。
立即学习“前端免费学习笔记（深入）”；
-
flex-nowrap sm:flex-wrap：移动端强制单行，≥640px 开始换行 -
flex-wrap md:flex-nowrap lg:flex-wrap：中屏锁死单行，大屏恢复换行 - 断点类从左到右覆盖，后写的优先级更高，
md:flex-wrap flex-nowrap不如flex-nowrap md:flex-wrap可靠 - 别用
flex-col配flex-wrap试图实现“垂直堆叠+换行”——那实际是向右新增列，不是向下延伸
gap-2 比 justify-between 更适合换行后的间距控制
启用flex-wrap后，justify-between只作用于每行内部，第二行开头不会和第一行末尾对齐；而gap是容器级间距，换行后依然均匀生效。
-
gap-2同时控制行内和行间间隙，比混用mr-2 mb-2更稳定、无翻倍风险 -
gap-y-2在 Flex 布局中基本无效（CSS 规范限制），别浪费调试时间 - 容器边缘无间隙？补
p-2之类内边距——gap不作用于容器边界 - 多行对齐需整体分布（非每行独立）？考虑改用
grid，flex对此场景本质不擅长
最常被忽略的点：换行不是“宽度触发”的被动行为，而是flex-wrap开启后，由子项总宽度是否超容器宽度 + 子项能否收缩共同决定的主动计算。调样式前，先看这两条是否都满足。
