flex-wrap: wrap 能解决换行问题，但需配合 flex-direction: row 和容器明确宽度；常见不换行原因是父容器无宽度限制、子项 white-space: nowrap 或内容不可折行。
flex-wrap: wrap 能不能直接解决换行问题
能，但必须配合 flex-direction: row 和容器有明确宽度限制（比如 width: 100% 或 max-width），否则子项可能撑满一行不换。默认 flex-wrap 是 nowrap，要显式设为 wrap 才生效。
常见错误是只写 display: flex 却漏掉 flex-wrap: wrap，或者给子项设了 flex: 0 0 100% 导致永远占满整行。
-
flex-wrap: wrap允许子项在空间不足时换到下一行 - 子项默认按内容宽度排列，不设宽时可能挤在一起或意外换行
- 建议给每个列表项加
flex: 0 0 calc(50% - 1rem)这类弹性基础宽度，再靠gap控制间距
媒体查询怎么配合 flex-wrap 做断点控制
单纯靠 flex-wrap 只能“被动换行”，而媒体查询可以“主动调整每行数量”。比如在小屏强制每行 1 个，在中屏每行 2 个，大屏每行 3 个——关键不是改 flex-wrap，而是改子项的 flex-basis。
注意：不要在媒体查询里反复开关 flex-wrap，它通常保持 wrap 不变，变的是单个子项占多少宽度。
立即学习“前端免费学习笔记（深入）”；
- 小屏（
max-width: 768px）：flex: 0 0 100% - 中屏（
769px - 1024px）：flex: 0 0 calc(50% - 0.5rem) - 大屏（
min-width: 1025px）：flex: 0 0 calc(33.333% - 0.666rem) - 务必配
gap: 1rem在容器上，比用margin更干净，不触发 margin collapse
为什么用了 flex-wrap 还是不换行
最常见三个原因：父容器没设宽度限制、子项被设了 white-space: nowrap、或子项内部有超长不可折行内容（如无空格长字符串或 inline 元素）。
Flex 换行判断依据是“当前行剩余空间是否小于子项最小宽度”，这个最小宽度由 min-width、内容固有宽度、以及 flex-basis 共同决定。
- 检查父容器是否被
width: fit-content或display: inline-flex收窄了可用空间 - 子项若有
img或video，记得加max-width: 100%; height: auto - 文本长串可加
word-break: break-word或overflow-wrap: break-word - 避免对子项设
flex: 1—— 它会让所有项强行等宽并拒绝换行
.article-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.article-item {
flex: 0 0 100%;
}
@media (min-width: 769px) {
.article-item {
flex: 0 0 calc(50% - 0.5rem);
}
}
@media (min-width: 1025px) {
.article-item {
flex: 0 0 calc(33.333% - 0.666rem);
}
}实际项目里，flex-wrap 和媒体查询配合的关键不是“能不能换”，而是“在哪换得合理”。很多换行异常，根源不在 Flex 本身，而在子项内容没做尺寸约束。
