flex-wrap: wrap 能自动换行，是因为它将弹性容器设为多行布局模式，当子项总宽超容器主轴可用空间时，浏览器主动将溢出子项移至下一行，而非压缩或隐藏；前提是父容器必须设 display: flex，且子项需有合理宽度约束（如 flex: 1 1 280px）和可收缩性（flex-shrink: 1）。
flex-wrap: wrap 为什么能自动换行
因为 flex-wrap 控制的是 flex 容器内子项在主轴空间不足时的行为。设为 wrap 后，当一行放不下所有卡片时，浏览器会主动把溢出的卡片“折”到下一行，而不是强行压缩或隐藏——这正是响应式卡片组需要的核心能力。
但前提是：父容器必须是 display: flex，且子卡片不能设置过宽（比如固定 width: 300px 却不配合 flex-shrink）导致无法换行。
-
flex-wrap: nowrap（默认）：所有卡片死扛在一行，可能横向溢出 -
flex-wrap: wrap：允许换行，但需确保子项有合理宽度约束（如flex: 1 1 280px） -
flex-wrap: wrap-reverse：换行方向翻转（从下往上堆），极少用于卡片组
卡片宽度怎么设才不破坏换行逻辑
直接写 width: 300px 看似简单，但在小屏下容易撑破容器、触发横向滚动条；全用 width: 100% 又会让单张卡片占满整行，失去“多列”效果。
推荐用 flex 缩写统一控制伸缩行为：
.card {
flex: 1 1 calc(33.333% - 20px); /* 每行最多3张，留出gap空间 */
}
<p>.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px; /<em> 推荐用 gap，比 margin 更可靠 </em>/
}</p>
-
flex: 1 1表示可伸缩 + 可收缩，避免卡片被强行拉宽 -
calc()中减去gap值，防止最后一列卡片右移错位 - 如果要适配不同断点，用媒体查询改
flex-basis值，而非重写整个flex
移动端换行后卡片高度不一致怎么办
这是 flex-wrap 最常见的副作用：每行卡片高度由该行最高卡片决定，其余卡片默认顶部对齐（align-items: stretch），视觉上参差不齐。
- 加
align-items: flex-start让所有卡片顶部对齐（最常用） - 加
align-content: flex-start控制多行之间的垂直间距（注意：只对多行生效） - 避免给卡片设
height固定值，否则内容少的卡片会留白难看 - 若需等高，优先用
display: grid替代 flex（grid天然支持行/列等高）
IE11 下 flex-wrap 不生效的兼容处理
IE11 支持 flex-wrap，但存在两个典型问题：一是 gap 完全不支持，二是 calc() 在 flex-basis 中解析异常（如 calc(33% - 10px) 会被忽略）。
- 用
margin模拟gap，并给最后一列卡片加margin-right: 0 - IE11 中改用固定像素值：
flex: 1 1 280px，再配合媒体查询降级 - 检测是否为 IE：可用
@supports not (flex-wrap: wrap)写回退样式 - 真要全面兼容，建议用 CSS Grid +
@supports特性查询渐进增强
真正麻烦的不是换行本身，而是卡片内容长度不可控时，flex-wrap 会暴露布局脆弱性——比如一段没截断的长标题，可能让整行卡片宽度崩坏。这种时候，得靠 min-width 和文本省略配合兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
