flex-wrap: wrap 未换行主因是父容器宽度过大或未设宽，致子项可单行排列；需设width/max-width、检查flex-shrink及white-space；justify-content仅作用于当前行内对齐。
flex-wrap: wrap 为什么没让子元素换行？
常见原因是父容器没设 width 或设得过大，导致所有子项能在一行内排下，flex-wrap: wrap 就不会触发。Flex 默认主轴是水平方向，只有当子项总宽度超过父容器可用宽度时，才会折到下一行。
实操建议：
- 给父容器明确设一个
width（比如width: 300px），或用max-width配合响应式 - 检查子项是否用了
flex-shrink: 0或固定宽高（如width: 200px）导致无法压缩，挤不进一行就强制换行——但若父容器太宽，还是不换 - 避免子项用
white-space: nowrap阻止内部文本换行，间接撑宽子项
justify-content 对换行后的对齐有没有影响？
有，但只作用于「当前行内」，不是整列。比如 justify-content: space-between 在第一行有 3 个子项时会拉开间距，第二行只有 2 个时，它们也会被拉满整行；它不管其他行怎么排。
容易被忽略的点：
立即学习“前端免费学习笔记（深入）”；
-
justify-content完全不影响行与行之间的垂直距离，那是gap或margin的事 - 如果希望每行都左对齐、不拉伸，用
justify-content: flex-start（默认值）即可，别误以为要设成left——CSS Flex 里没有left这个值 - 在多行场景下，
justify-content: center会让每行居中，但各行之间仍按文档流堆叠，不会整体居中
比 flex-wrap 更稳的多列自动换行方案？
真要严格按列数控制 + 自动换行，column-count 比 Flex 更直接：
article {
column-count: 3;
column-gap: 1rem;
}但它把内容当成连续文本切分（类似报纸），不保持子元素块级完整性。如果每个子项必须是完整卡片、不能跨列断裂，那就不能用。
这时可考虑：
- Grid 布局：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，配合gap，换行逻辑更可控，且天然支持多行对齐（justify-items/align-items） - Flex +
min-width子项：给子项设flex: 0 0 calc(33.333% - 0.5rem)（预留 gap），比单纯靠flex-wrap更易预测换行点
justify-content 和 flex-wrap 一起用时的典型错误
最常踩的坑是以为 justify-content: space-around 能让“所有子项均匀分布在整个容器内”，结果发现换行后，首行和末行的外边距变大，中间行被压缩——因为 space-around 给每行两端加半份间距，多行时视觉上就不均等了。
解决思路：
- 想真正均匀分布所有子项（无视行数），改用 Grid 的
grid-auto-flow: dense配合justify-content: center - 坚持用 Flex？那就放弃
justify-content，改用子项加margin控制横向间距，例如margin-inline: 0.5rem，再用margin-inline-start: 0清掉第一项左边距 - 别忘了
align-content才管多行之间的垂直对齐（比如align-content: flex-start防止空行占位）
实际布局中，换行行为是否符合预期，往往取决于父容器尺寸、子项弹性参数、以及你到底想“按宽度折行”还是“按数量分列”——这两个目标用同一套 Flex 属性很难兼顾清楚。
