flex-wrap控制Flex布局中子项是否换行，默认nowrap不换行；wrap允许换行且新行从主轴起点开始；wrap-reverse则反向堆叠换行。需配合justify-content、align-content等实现多行对齐与间距控制。
在Flex布局中，内容是否换行由 flex-wrap 属性控制，默认不换行，超出容器会被压缩或溢出。要让子项自动换行，只需设置 flex-wrap: wrap。
flex-wrap 的三个取值及效果
它决定主轴方向上的子项在空间不足时如何排列：
- nowrap（默认）：所有子项强行保持在一行，可能溢出容器
- wrap：允许换行，新行从主轴起点方向开始（如左对齐的 flex 容器，第二行仍在左侧）
- wrap-reverse：换行但新行反向堆叠（例如原本向下换行，变成向上叠加）
配合 justify-content 和 align-content 更好地控制换行后布局
仅设 wrap 不够，换行后多行之间的对齐和分布需额外处理：
-
justify-content控制每行内部子项的主轴对齐（如space-between） -
align-content控制多行整体在交叉轴上的对齐与间距（如flex-start、center、space-around） - 注意：
align-items仍影响单行内所有子项在交叉轴上的对齐（如垂直居中）
常见换行失效原因
设置了 flex-wrap: wrap 却不换行？可能是这些细节被忽略：
- 父容器没设宽度，或子项总宽始终小于容器（比如子项用了
flex: 1强制撑满） - 子项设置了
white-space: nowrap或固定宽高，导致无法压缩换行 - 父容器
display: flex未生效（比如被其他样式覆盖，或写在错误选择器下） - 使用了
flex-direction: column，此时换行行为发生在交叉轴，flex-wrap实际控制的是“列换行”，容易误解
一个实用的小例子
三列卡片在小屏自动变为单列：
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 0 0 calc(33.333% - 0.666rem); /* 留出 gap 余量 */
}
@media (max-width: 768px) {
.card {
flex: 0 0 100%;
}
}
这里用 flex-wrap: wrap 打底，再配合媒体查询和 flex-basis 精准控制断点换行。
基本上就这些。flex-wrap 本身不复杂，但和 flex-direction、flex-basis、gap 等搭配时容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
