如何通过设置flex-wrap属性使Flexbox容器元素自动换行？

本文共计893个文字，预计阅读时间需要4分钟。

直接写+flex-wrap: wrap+但不行换行吗？大概率是容器没设置宽度，或子项总宽未超容器。

Flexbox 默认主轴是水平方向，+flex-wrap: wrap+只在子项压不下去时才触发换行——即不是靠内容多少，而是靠实际占据空间是否超出容器主轴尺寸。

• 容器必须有明确的 width 或 max-width（比如 width: 300px），否则可能撑满父容器，永远“不挤”
• 子元素不能都设了 flex-shrink: 0 且总宽小于容器——它们宁可溢出也不换行
• 若子项用了 white-space: nowrap 或固定宽高（如 width: 200px），需确认它们加起来确实 > 容器宽度

wrap 和 wrap-reverse 的行为差异

flex-wrap: wrap 是从上到下新增行，新行在旧行下方；flex-wrap: wrap-reverse 则让新行出现在旧行上方，视觉上像“倒着堆叠”。这在需要底部对齐、或配合 align-content: flex-start/flex-end 调整多行间距时很关键。