加 flex-wrap: wrap 是换行的硬性前提，不加则子项死扛单行；flex-basis 与 flex-shrink 共同决定换行时机，需设 flex-shrink: 0 和显式 flex-basis 才能按预期换行；换行后用 align-content 控制多行分布，单行时该属性无效。
加 flex-wrap: wrap 是换行的硬性前提，不加它，哪怕容器窄到只剩 1px，子项也死扛在一行——这不是 bug，是 Flex 的设计逻辑。
为什么写了 display: flex 还是不换行？
因为 flex-wrap 默认是 nowrap，它根本没开换行引擎。你只启了车，没点火。
- 检查是否漏写了
flex-wrap: wrap（不是可选，是必须） - 父容器没设
width、max-width或受祖先限制，导致“永远够宽”，换行条件永不触发 - 子项用了
flex: 1或flex-shrink: 0，浏览器宁可溢出也不缩放，换行无从谈起 - 子项内有长单词、URL 或未设
word-break: break-word，内容撑爆单行宽度，间接阻止换行
flex-basis 怎么设才让换行按预期发生？
换行不是靠“猜空间”，而是靠子项有可衡量、可收缩的基准尺寸。只写 flex: 1 等于放弃控制权。
- 推荐：
flex: 0 0 calc(25% - 8px)（不放大、不缩小、基准宽为 25% 减 gap） - 更稳妥：
flex: 0 0 200px，配合gap: 8px控制间距 - 绝对避免：
flex: 1、flex: 1 1 auto，它们会让子项抢满整行，换行逻辑直接失效 - 如果内容长度极不确定，加
min-width: 0+overflow-wrap: break-word防止长文本锁死布局
换行后多行对齐总出问题？
align-items 和 align-content 完全不是一回事：前者管每行内子项怎么排，后者管“行”本身怎么分布。
- 单行时，
align-items: center让图标/文字垂直居中 - 换行后，
align-content: flex-start让所有行顶部对齐（最常用） -
align-content: center要求容器有明确height，否则无效 - 别用
align-items: stretch（默认值）配高度不一的卡片，会导致视觉参差
真正卡住人的，从来不是 flex-wrap: wrap 这一行代码，而是它和 flex-basis、容器宽度、内容弹性三者之间的实时博弈——调的时候得把这三块同时拉进 DevTools 里看，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
