flex-wrap: wrap 是实现 flex 子元素自动换行的唯一必要条件，因默认值 nowrap 会强制单行显示；需显式声明并配合 display: flex、合理 flex-basis/min-width 及文本换行控制才能生效。
flex-wrap: wrap 是让 Flex 容器内子元素自动换行的唯一必要条件，其他属性都是配合它生效的。
为什么加了 display: flex 还不换行？
因为默认 flex-wrap 值是 nowrap，所有子项会被强行压在一行里，哪怕溢出容器或被压缩到看不见。
必须显式写上：flex-wrap: wrap（或 flex-flow: row wrap）。
- 别只写
display: flex就以为万事大吉 - 检查浏览器开发者工具里该属性是否被覆盖（比如重置 CSS 或框架样式把它改回
nowrap） -
flex-wrap: wrap-reverse也能换行，但首行会贴底，多数场景不用
flex: 1 1 200px 和 flex: 0 0 calc(50% - 0.5rem) 怎么选？
前者适合「数量不确定、希望每项尽量均分又带最小宽度」的卡片流；后者适合「严格两列、gap 固定、不留空隙」的布局。
-
flex: 1 1 200px：项目基础宽度 200px，可伸缩填充剩余空间，多列时自动折行。注意要配min-width: 0防止长文本撑破 -
flex: 0 0 calc(50% - 0.5rem)：强制每行最多两个，0.5rem是gap: 1rem的一半，确保两列刚好填满整行，无错位 - 用
calc()时务必确认父容器没 padding 挤占可用宽度，否则计算会失准
换行后最后一行对不齐，间距忽大忽小？
这是 justify-content: space-between 在换行时的典型副作用：它只对「当前行」生效，最后一行若只有 1 个或 2 个项目，就会被拉到两端，中间留大片空白。
- 换成
justify-content: flex-start，所有项目左对齐，视觉更稳定 - 如果真需要“两端对齐”，改用
justify-content: space-around或space-evenly，它们对单行或多行都更公平 - 千万别在
flex-wrap: wrap容器里混用float或margin-left: auto—— Flex 下这些无效且会干扰布局
移动端文字撑破卡片、换行失效？
Flex 换行管的是“子元素级”，不是“子元素内部文字级”。如果卡片里有超长 URL 或无空格字符串，它会把整个卡片撑宽，导致换行失败。
- 给卡片内容加
word-break: break-word或overflow-wrap: break-word - 配合
min-width: 0（作用于卡片本身），解除 Flex 项目的最小尺寸保护，允许其收缩 - 避免对卡片设
white-space: nowrap—— 这会直接禁用所有换行行为
flex-wrap 本身很简单，但实际卡住的地方往往不在它身上，而在你没意识到的 min-width、gap 计算、文本断行、或 justify-content 的行级作用域。先盯住这一行声明，再一层层排查依赖项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
