flex-wrap: wrap 不能直接让多行卡片等宽，因换行后每行独立计算剩余空间，需配合 flex: 1 1 0 与 min-width（如280px）才能实现动态等宽换行，且 gap 占位须用 calc() 补偿。
flex-wrap: wrap 为什么不能直接让多行卡片等宽？
直接写 display: flex + flex-wrap: wrap 后，卡片默认按内容宽度伸缩，不会自动均分容器宽度。浏览器不会主动把每行的剩余空间重新分配给该行的子项——它只在单行内做 flex-grow 分配，换行后就“重置”了。
常见错误是只加 flex: 1 或 flex-basis: 0 却没配合 min-width，导致小屏下卡片被压成一条线或文字溢出。
- 必须显式限制单张卡片最小宽度，否则
flex-basis: 0会让它无限收缩 -
flex: 1 1 0要搭配min-width才能真正触发“等宽+换行”逻辑 - 不同屏幕下要靠媒体查询动态调整
min-width，而不是改flex值本身
用 min-width + flex 控制每行张数（不依赖媒体查询）
更健壮的做法是放弃“固定列数”，让卡片自己决定每行放几张：通过设置 min-width，配合 flex: 1 1 0，让 Flex 容器在空间不足时自然折行，且每行卡片尽可能等宽。
例如希望小屏一行 1 张、中屏 2 张、大屏 3 张，可这样写：
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 0;
min-width: 280px; /* 小屏：≥280px 才能放 1 张 */
max-width: 100%; /* 防止超宽容器里卡片过宽 */
}
这时浏览器会计算：容器宽 ÷ 280px = 最多能放几张，再向下取整作为该行数量，剩余空间均分给所有卡片。
-
min-width: 280px是关键阈值，不是卡片最终宽度 - 实际宽度 = (容器宽 − 所有 gap) ÷ 当前行卡片数
- 如果容器宽刚好卡在 2×280 和 3×280 之间，它仍会尝试塞 3 张（除非加
flex-shrink: 0）
配合媒体查询做断点微调（避免临界抖动）
纯 min-width 在某些宽度临界点（比如刚好 559px）会出现一行 2 张变 1 张的突兀跳变。用媒体查询锁定常见断点更可控：
@media (max-width: 767px) {
.card { min-width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.card { min-width: calc(50% - 0.5rem); } /* 2 列，减去 gap 占位 */
}
@media (min-width: 1024px) {
.card { min-width: calc(33.333% - 0.666rem); } /* 3 列 */
}
注意这里用了 calc() 减去 gap 对应的值（如两列时一个 gap，三列时两个 gap），否则实际列宽会因 gap 挤压而错位。
- gap 是外边距，不参与 flex 分配，但占容器总宽
- 不要用
width: 33.333%，它和flex冲突，会导致换行失效 - 移动端优先时，
min-width: 100%比flex: 0 0 100%更可靠
IE11 兼容性陷阱：flex-basis: 0 不生效怎么办？
IE11 对 flex-basis: 0 解析异常，常导致卡片堆成一列或高度塌陷。必须用具体长度值替代：
.card {
flex: 1 1 280px; /* IE11 要写死数值，不能写 0 */
min-width: 280px;
}
同时禁用 flex-shrink（设为 0）防止 IE11 错误压缩：
- IE11 下
flex: 1 1 0等价于flex: 1 1 auto，失去控制力 - 改用
flex: 1 0 280px+min-width组合最稳妥 - 如果项目必须支持 IE11，建议统一用
flex: 0 0 [width]+margin模拟 gap，放弃gap
实际布局中，最易被忽略的是 gap 占位对 calc() 的影响，以及 IE11 下 flex-basis 的数值硬编码要求。这两个点不处理，其他都调得再细也会在特定设备上崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
