flex-wrap: wrap 用于允许 flex 子元素自动换行；设置 display: flex 和 flex-wrap: wrap 后，子元素在一行放不下时会折行排列，结合 flex 宽度与 calc() 可控制每行数量，适用于卡片网格、标签组等多行布局场景。
在使用 CSS Flexbox 布局时，如果容器内的子元素总宽度超过容器宽度，默认情况下它们会被压缩或溢出。要让这些子元素自动换行显示，就需要用到 flex-wrap: wrap 属性。
flex-wrap: wrap 是什么？
flex-wrap 属性控制 flex 容器中的子元素是否可以换行以及如何换行。默认值是 nowrap，即所有项目都在一行显示。设置为 wrap 后，当一行放不下时，子元素会自动折行排列。
常用取值：
- nowrap：不换行（默认）
- wrap：允许换行，下一行在下方
- wrap-reverse：换行，但下一行在上方
实现多行排列的基本写法
要实现多行排列，需要给父容器设置 display: flex 和 flex-wrap: wrap。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 可选：设置子项之间的间距 */
}
.item {
flex: 0 0 200px; /* 不伸缩，基础宽度 200px */
height: 100px;
background-color: #007acc;
color: white;
text-align: center;
line-height: 100px;
}<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
在这个例子中，每个子项宽 200px，容器宽度若只能容纳 3 个，则第 4 个会自动换到下一行。
控制每行显示数量的小技巧
通过设置子项的宽度，可以控制每行显示几个元素。例如：
- 想每行显示 3 个：设
flex: 0 0 calc(33.33% - 10px) - 想每行显示 4 个：设
flex: 0 0 calc(25% - 10px)
结合 gap 使用时，用 calc() 能更精确地处理间距占用的空间。
常见应用场景
这种多行 flex 布局非常适合以下场景：
- 图片或卡片网格展示（如商品列表）
- 标签、按钮组的自适应排列
- 表单字段的响应式布局
相比传统浮动或 inline-block 布局，flex-wrap 更灵活，无需清除浮动，也更容易垂直对齐。
基本上就这些。只要记住：开启换行必须加 flex-wrap: wrap，再配合合适的子项宽度，就能轻松实现自动换行的多行布局。
