不设 flex-wrap: wrap 是换行失败的主因；需确认写了正确属性、父容器有明确宽度、避免 flex-grow 干扰；推荐用 flex: 0 0 200px 控制基准宽，gap 替代 margin，多行对齐用 align-content。
不设 flex-wrap: wrap，卡片死活不会换行——这是 90% 换行失败的根源。
为什么加了 display: flex 还是不换行
Flex 容器默认就是 flex-wrap: nowrap，哪怕子项总宽远超父容器，它也只压缩、溢出、变形，绝不折行。这不是 bug，是设计如此。
- 检查是否真的写了
flex-wrap: wrap（不是拼错成wrap-或漏掉分号） - 确认父容器有明确宽度（比如
width: 100%或max-width），否则wrap可能“没得比”而失效 - 避免子项用了
flex: 1或flex-grow: 1——它会强行撑满，把换行机会彻底堵死
flex: 0 0 200px 比 width: 200px 更稳
width 是 CSS 盒模型的硬约束，在 Flex 布局里容易和 flex-shrink 冲突；而 flex-basis（即 flex 第三个值）才是 Flex 引擎认的“基准尺寸”，配合 flex-shrink: 0 才能确保卡片按预期宽度换行。
- 推荐写法：
flex: 0 0 200px（不放大、不缩小、基准宽 200px） - 如果希望小屏下缩放，改用
flex: 0 1 200px，并搭配min-width: 200px防止压太扁 - 别混用
width和flex-basis，浏览器可能按不可预测顺序解析
gap 是间距首选，但旧版 Safari 得备选 margin
gap 不参与盒模型计算，不会引发最后一行多出空白、边界溢出等问题；margin 则要手动处理首尾边距，稍一疏忽就错位。
- 现代项目直接用：
gap: 1rem（支持 Flex 和 Grid） - 需兼容 Safari ≤14.1：用
margin替代，并给子项加margin-right和margin-bottom，再用:nth-child()清除每行末尾的margin-right - 移动端建议同步调小
gap和padding，否则小屏下标签/卡片挤满一行还剩不下呼吸感
换行后多行垂直对齐用 align-content，不是 align-items
align-items 控制的是“单行内所有卡片在交叉轴上的位置”，比如让每张卡片都顶部对齐；而 align-content 才管“多行整体怎么分布”。很多人调了半天 align-items，发现行与行之间空隙没变——因为那根本不是它负责的。
- 仅当出现两行及以上时，
align-content才生效 - 常见取值：
flex-start（靠上）、center（居中）、space-between（首尾贴边，中间均分） - 如果卡片高度不一致，又不想拉伸短卡片，记得加
align-items: flex-start，否则默认stretch会让所有卡片等高
真正卡住人的往往不是 flex-wrap 本身，而是它和 flex-basis、flex-shrink、gap 的组合逻辑——尤其当卡片含图片或动态文本时，渲染宽度浮动，换行点会悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
