flex容器必须设flex-wrap: wrap，否则卡片会溢出；默认nowrap强制单行，内容超宽即拉伸或横向滚动；flex-wrap: wrap是换行硬性前提，缺它无法折行。
Flex容器必须设flex-wrap: wrap，否则卡片会溢出
很多人写了display: flex但卡片在小屏上直接挤成一长条或横向滚动，根本原因是没开换行。Flex默认是单行布局，内容超宽就强行拉伸容器或溢出。
-
flex-wrap: wrap是硬性前提，缺它卡片根本不会折行 - 别用
white-space: nowrap或overflow: hidden掩盖问题，那是遮丑不是解决 - 如果卡片文字过长导致单卡撑宽，优先用
word-break: break-word或overflow-wrap: break-word，而不是靠flex-wrap兜底
flex: 1 1 280px比flex-basis: 280px更安全
flex: 1 1 280px等价于flex-grow: 1; flex-shrink: 1; flex-basis: 280px，三者缺一不可：只设flex-basis不设shrink，小屏下卡片死撑不缩；不设grow，大屏下空隙拉不开。
-
280px是移动端安全底线（iPhone SE 屏宽375px，减去左右边距后刚好容下） - 避免写
flex: 1——它隐式把flex-basis设为0%，卡片会无限压缩 - 若需锁死最小列数（如强制至少2列），改用
min-width: 280px配合flex: 1 1 auto
用gap代替margin，否则首尾多出半格空白
Flex容器开了gap: 16px，再给每张卡片加margin: 8px，结果就是卡片间实际间距32px，且容器左右各多出8px空白——视觉上像没对齐。
- Flex中
gap不作用于容器边缘，margin会，二者叠加必然错位 - 卡片自身删掉所有
margin，只靠gap统一控距 - Safari 15.6及更早版本不支持
gap？别 fallback 到margin，直接切到Grid方案：display: grid+gap在旧Safari里依然可靠
等高卡片要靠align-items: stretch，但三处常被破坏
align-items: stretch本该让所有卡片拉满父容器高度，但实际常失效。不是属性写错了，而是被以下三处覆盖：
- 父容器没设
display: flex（只给卡片设display: flex无效） - 某张卡片写了
height、max-height或min-height，等于手动锁死高度 - 卡片内部用了
position: absolute的标题/按钮，导致内容脱离文档流，不参与高度计算
真正难的是多行场景：一旦flex-wrap: wrap启用，第二行卡片不再和第一行对齐。这时候别指望单个容器搞定，得结构层面拆行——每3张包一层.card-row，每层单独设display: flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
