flex-wrap: wrap 仅在子项总宽度超过容器且未被压缩时触发换行；需设 flex-shrink: 0 或 min-width 防压缩，优先用 flex-basis 而非 width 控制尺寸，多行对齐用 align-content，小屏需防 white-space 和 min-width 导致溢出。
flex-wrap: wrap 什么时候才真正起作用
它只在容器主轴方向放不下所有子项时才触发换行，不是“写了就自动流式”。关键前提是子项总宽度超过容器宽度——但很多人忘了，flex-shrink 默认为 1，子项会先压缩自己来避免换行。
要让 flex-wrap: wrap 按预期工作，得配合控制子项不被过度压缩：
- 给子项设
flex-shrink: 0，防止它被 squeeze - 或用
min-width（比如min-width: 200px）卡住最小尺寸 - 若子项是图片或卡片，直接设固定宽（如
width: 240px）更可控
子项 width 设百分比还是 flex-basis
用 width: 33.33% 看似能三列布局，但一旦加 padding/margin/border，就容易溢出导致意外换行；而 flex-basis 是 flex 布局的原生尺寸锚点，更可靠。
推荐写法：
- 均分三列：子项设
flex: 0 0 calc(33.333% - 12px)（减去左右 margin 总和） - 响应式场景下，改用
flex-basis: 250px+flex-shrink: 0，再配合媒体查询调整 - 避免混用
width和flex-basis，浏览器可能按规范忽略width
换行后对齐错位？检查 align-content
当多行出现时，align-items 只管单行内交叉轴对齐，真正控制行与行之间间距的是 align-content。默认值 stretch 会让各行填满容器高度，看起来像“顶天立地”，但实际内容却居中悬浮。
常见修复方式：
- 要顶部对齐：设
align-content: flex-start - 要行间留空：用
align-content: space-between或space-around - 如果只有一行，
align-content完全无效——此时调align-items才有用
移动端适配中 flex-wrap 的隐藏陷阱
在小屏上，即使设了 flex-wrap: wrap，也可能因父容器有 min-width、或子项含不可缩内容（如长单词、white-space: nowrap 元素），导致整行撑开、水平滚动。
排查顺序建议：
- 用浏览器调试器选中子项，看 computed 中
flex-basis和width是否远超预期 - 检查是否有未重置的
white-space或min-width遗留样式 - 对文本内容加
overflow-wrap: break-word，防长单词卡死布局
flex 流式布局真正的难点不在语法，而在各种隐式尺寸约束的叠加效应——一个没关掉的 flex-shrink，就能让整排卡片突然塌成一列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
