flex-wrap: wrap 是卡片自动换行的必要开关，不设置则所有卡片强制单行显示；需配合父容器明确宽度、子项可收缩（如flex-shrink:1或min-width:0）、合理宽度约束（如flex:1 1 280px）及文本断行控制（如word-break:break-word）才能正常换行。
flex-wrap: wrap 是让卡片自动换行的开关，不写它，哪怕容器再窄，所有卡片也死扛在一行里——这是绝大多数人卡住的第一步。
为什么加了 display: flex 还是不换行
因为 flex-wrap 默认值是 nowrap，不是 wrap。只写 display: flex 相当于关着门不让换行。
- 检查开发者工具里
flex-wrap是否被重置样式覆盖（比如 CSS 框架或全局 reset 把它改回nowrap） - 父容器必须有明确宽度（比如
width: 100%或max-width），否则它会无限撑宽，子项永远“够得着” - 子卡片不能设
flex-shrink: 0且总宽超容器，否则浏览器宁可横向溢出也不缩放
flex: 0 0 calc(50% - 0.5rem) 和 flex: 1 1 280px 怎么选
前者适合“严格两列、不留空隙”的场景；后者适合“数量不定、希望卡片尽量均分又带最小宽度”的流式卡片组。
-
flex: 0 0 calc(50% - 0.5rem)：强制每行最多两个，0.5rem是gap: 1rem的一半，确保两列刚好填满整行；但需确认父容器没额外padding挤占可用宽度 -
flex: 1 1 280px：基础宽度 280px，可伸缩填充剩余空间；必须配min-width: 0，否则长文本或图片可能撑破换行逻辑 - 别混用：同一容器内不要有的卡片用
flex: 1，有的用flex: 0 0，会导致换行错乱
换行后最后一行对不齐、间距忽大忽小
这是 justify-content: space-between 在多行下的副作用：它只对当前行生效，最后一行若只有 1 个卡片，就会被拉到左右两端，中间大片空白。
- 换成
justify-content: flex-start，所有卡片左对齐，视觉最稳定 - 真要两端对齐，改用
justify-content: space-evenly，它对单行/多行都公平分配间距 - 千万别在
flex-wrap: wrap容器里加margin-left: auto或float，Flex 下无效且干扰布局
移动端文字撑破卡片、换行失效
flex-wrap 管的是子元素级换行，不是子元素内部文字级换行。一个超长 URL 或无空格字符串，会把整张卡片撑宽，导致换行失败。
- 给卡片加
word-break: break-word或overflow-wrap: break-word - 给卡片本身加
min-width: 0，解除 Flex 项目默认的最小尺寸保护，允许其收缩 - 避免设
white-space: nowrap——这会直接禁用所有换行行为 - IE11 不支持
gap，也不稳定解析calc()，要用margin模拟间距，并改用flex: 0 0 50%这类确定值
真正决定换行是否“好用”的，从来不只是 flex-wrap: wrap 这一行声明，而是它和 flex-basis、min-width、gap、甚至 word-break 的组合效果。漏掉任意一环，都可能让卡片在某个屏幕宽度下突然错位或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
