不加flex-wrap: wrap，卡片死扛一行不换行——因默认值为nowrap，需显式设置wrap并确保父容器有明确宽度、子项可收缩、避免flex-shrink:0或过大min-width干扰。
不加 flex-wrap: wrap，卡片死扛一行，再窄的屏幕也横向溢出——这是 90% 的人第一次写响应式卡片时卡住的地方。
为什么写了 display: flex 还是不换行
因为 flex-wrap 默认值是 nowrap，不是 wrap。只设 display: flex 相当于打开了门但锁死了换行通道。
- 检查开发者工具中
flex-wrap是否被 CSS 框架（如 Bootstrap）或全局 reset 覆盖成nowrap - 父容器必须有明确宽度约束，比如
width: 100%或max-width: 1200px；否则它会无限撑宽，子项永远“够得着” - 子卡片若设了
flex-shrink: 0或min-width过大（如min-width: 400px），浏览器宁可溢出也不缩放
flex: 1 1 280px 和 flex: 0 0 calc(50% - 0.5rem) 怎么选
前者适合数量不定、需弹性填充的流式场景；后者适合严格控制列数（如每行固定两张）且间隙精确的布局。
-
flex: 1 1 280px：基础宽度 280px，可伸缩 + 可收缩；必须配min-width: 0，否则长文本或图片会撑破换行逻辑 -
flex: 0 0 calc(50% - 0.5rem)：强制每行最多两张，0.5rem是gap: 1rem的一半，确保两列刚好填满；但要注意父容器 padding 是否挤占可用宽度 - 别混用：同一容器内不能有的卡片用
flex: 1，有的用flex: 0 0，会导致换行错乱
换行后最后一行对不齐、卡片高度参差不齐
这是 flex-wrap: wrap 的典型副作用：每行按该行最高卡片拉伸，且 justify-content: space-between 在最后一行只剩 1 张卡片时会把它拉到两端，中间大片空白。
- 用
align-items: flex-start让所有卡片顶部对齐（最常用） - 用
justify-content: flex-start替代space-between，避免最后一行间距失控 - 若需等高，优先改用
display: grid配grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，grid 天然支持行/列等高 - 避免给卡片设固定
height，内容少的卡片会留白难看
IE11 下 flex-wrap 换行失效或错位
IE11 支持 flex-wrap，但有两个硬伤：gap 完全不识别，calc() 在 flex-basis 中解析异常（如 calc(33% - 10px) 直接被忽略）。
- 用
margin模拟gap：给卡片设margin-right: 16px; margin-bottom: 16px，再用:nth-child(3n)清除最后一列右 margin - 放弃
calc()，改用确定值，比如flex: 0 0 32%或flex: 0 0 50% - 加
min-width: 0到卡片上，IE11 下 Flex 项目默认最小尺寸保护更顽固，不加它文字撑破换行很常见
真正让换行“稳”的，不是加了 flex-wrap: wrap 这一行，而是子项是否真能被压缩、父容器是否真有边界、间隙是否在所有浏览器里都算得清——这些细节漏掉一个，换行就变成玄学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
