Flex容器默认flex-wrap为nowrap，不显式设置wrap不会换行；子元素需可收缩（如min-width:0）、父容器需有明确宽度，且justify-content:center不能实现每行居中。
flex-wrap: wrap 没写，就根本不会换行
Flex 容器默认 flex-wrap 值是 nowrap，不是 wrap。只写 display: flex，等于明确告诉浏览器“不许换行”，哪怕子元素加起来宽过容器，它也会强行压缩、溢出或横向滚动，绝不会折到下一行。
常见错误写法：
.container {
display: flex;
/* 漏了 flex-wrap: wrap —— 这行没加，换行逻辑就不存在 */
}
正确写法必须显式声明：
.container {
display: flex;
flex-wrap: wrap; /* 或 flex-flow: row wrap */
}
- 别依赖
flex-flow简写却漏掉其中一项：比如只写flex-flow: row，flex-wrap仍为默认nowrap - 检查是否被 CSS 预处理器或组件库的 reset 样式覆盖——用开发者工具看 computed 样式里
flex-wrap真实值 - Vue/React 中动态 class 可能拼错名，比如写成
flexWrap（驼峰）但 CSS 属性是短横线分隔，实际无效
写了 flex-wrap: wrap 却还不换行？盯住子元素尺寸
写了 flex-wrap: wrap 却没效果，大概率是子元素“太硬”，撑满一行也不让位。Flex 换行不是靠“行满”触发，而是靠“放不下+允许收缩”共同决定。
- 子元素设了
flex-shrink: 0且宽度固定（如width: 300px），它宁可溢出也不缩，自然不换行 - 子元素用了
min-width: max-content或min-width: fit-content，尤其含长单词/URL 时，会锁死最小宽度 - 图片没设
max-width: 100%，原始尺寸过大，直接卡住整行 - 子元素内文本未处理断行：
white-space: nowrap会阻止内部换行，间接导致父级 flex 拒绝折行
安全兜底写法（对每个子项）：
.item {
flex: 0 1 auto; /* 不放大、可缩小、基础尺寸由 width 或内容决定 */
min-width: 0; /* 关键：解除 flex 项默认的 min-width: auto 锁定 */
word-break: break-word;
overflow-wrap: break-word;
}
父容器宽度不明确，flex-wrap 就形同虚设
flex-wrap: wrap 只在“主轴空间不足”时才生效。如果父容器宽度无限（比如 display: inline-flex 的容器、或未设宽的 div 在 body 中），浏览器认为“永远有空间”，就不会触发换行。
- 给父容器加明确宽度：
width: 600px、max-width: 100%、或inline-size: 100% - 避免父容器是
fit-content行为（如某些 Flex/Grid 子项作为父容器时） - 临时加
outline: 1px solid red查看父容器真实渲染宽度，确认第二行是否被overflow: hidden裁掉 - Safari（尤其 iOS 15–16）对无宽容器 +
justify-content: center的换行计算有偏差，加min-width: 0到子项上可缓解
想每行都居中？justify-content: center 不管用
justify-content: center 是把**所有子项当一个整体**在主轴上居中，不是每行单独居中。换行后第二行、第三行依然左对齐（除非该行子项总宽恰好等于容器宽）。
- 不要指望
justify-content: center+flex-wrap: wrap实现“每行居中”——这是常见误解 -
align-content: center控制的是多行在交叉轴（垂直方向）的分布，不影响单行水平对齐 - 真要每行独立居中，更稳方案是改用
display: grid：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))+justify-content: center，天然支持等宽换行+每行居中 - 若必须用 Flex，接受最后一行左偏的事实，或手动用
margin: auto给末尾子项补位（仅适用于数量可控场景）
最常被忽略的一点：换行行为本身依赖子项能否收缩，而收缩能力又受 min-width、flex-basis、内容断行三者共同制约。少盯一个，就可能卡在“写了 wrap 却不换”的死循环里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
