flex-wrap: wrap 是实现子元素自动换行的必要条件，justify-content 仅控制单行内对齐，不触发换行；默认 nowrap 下子元素会溢出或压缩，必须显式设 wrap 才能环绕。
flex-wrap: wrap 是实现子元素“环绕”的唯一可靠方式，justify-content 本身不控制换行，只管单行内对齐。
为什么 justify-content 单独用不了环绕效果
justify-content 只在**单行 flex 容器**中起作用——它决定这一行里项目怎么分布（比如 space-between、center），但不会触发换行。即使容器宽度不够，只要没设 flex-wrap: wrap，子元素就会被强行压缩或溢出，根本不会“绕到下一行”。
常见错误现象：
- 设置了
justify-content: space-around，但子元素挤成一排、文字折行错乱、图标跑出容器右边界 - 加了
width: 100%和flex: 1，结果所有项目还是横着撑满，没出现预期的“多行堆叠”
flex-wrap: wrap 才是环绕的关键开关
必须显式开启换行能力，否则 Flex 布局默认是 flex-wrap: nowrap（不换行）。只有设为 wrap 或 wrap-reverse，子元素才会在空间不足时自动折行。
实操建议：
- 父容器必须同时声明：
display: flex+flex-wrap: wrap - 子元素无需额外设置
flex-basis，但加上能更可控：比如flex: 0 0 calc(33.333% - 8px)可让每行最多 3 个带间隙的卡片 - 避免给子元素设固定
width: 100%，这会阻止换行——它会让每个子项都试图占满整行 - 若需响应式换行点，配合媒体查询改
flex-basis比直接改flex-wrap更稳定
justify-content 在多行场景下的真实行为
开启 flex-wrap: wrap 后，justify-content 依然只作用于**每一行内部**，不是整个容器。这意味着：
-
justify-content: space-between→ 每行首尾贴边，中间空隙均分；但第二行、第三行各自独立计算 -
justify-content: center→ 每行居中，各行之间水平位置可能不齐（尤其当某行元素数少时） - 如果想让所有行整体居中对齐，得用
align-content: center（注意：仅对多行生效，单行无效）
示例对比：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 每行内两端对齐 */
align-content: flex-start; /* 多行时顶部对齐（默认值） */
}
容易被忽略的交叉轴控制：别忘了 align-content
很多人调好了 flex-wrap 和 justify-content 却发现多行之间垂直间距奇怪——问题往往出在没管 align-content。它专管“多行 flex line 在交叉轴上的分布”，而 align-items 只管“单行内各项目在交叉轴上的对齐”。
典型踩坑点：
- 容器高度固定，但子元素行数变化时，内容上下浮动不稳 → 应设
align-content: flex-start锁定顶部对齐 - 希望所有行垂直居中（比如两行内容在高容器里居中）→ 用
align-content: center，而非align-items: center -
align-content在单行容器中完全无效，调试时先确认是否真有多行（可临时加border看布局线）
真正复杂的点不在“怎么写”，而在“哪一层该由哪个属性管”——justify-content 不负责换行，align-items 不负责多行堆叠，这些边界一旦混淆，样式就容易反复失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
