flex-wrap属性用于控制flexbox子元素是否换行及方向，其值为nowrap（默认不换行）、wrap（允许换行，首行在上）和wrap-reverse（首行在下）；通过设置display: flex与flex-wrap: wrap可实现多行布局，适用于响应式卡片、标签组等场景；结合justify-content、align-items和align-content可优化主轴与交叉轴对齐方式，配合媒体查询和子项最小宽度设置能实现自适应换行，提升布局灵活性与页面美观度。
在使用 CSS Flexbox 布局时，当容器内的子元素过多，单行无法容纳所有项目，默认情况下它们会被压缩或溢出。这时可以通过 flex-wrap 属性实现多行排列，让布局更灵活自然。
flex-wrap 的基本作用
flex-wrap 决定弹性容器中的子元素是否换行以及换行方向。它有三个常用值：
- nowrap：默认值，所有子元素都在一行（可能压缩或溢出）
- wrap：允许换行，第一行在上方
- wrap-reverse：允许换行，但第一行在下方（反向堆叠）
通常搭配 display: flex 使用，开启弹性布局后设置换行行为。
实现多行布局的步骤
要让弹性盒子支持多行显示，只需在父容器上添加以下样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
}
这样当子项总宽度超过容器宽度时，超出的部分会自动折到下一行。
常见应用场景包括响应式卡片列表、标签组、商品展示等。
控制主轴与交叉轴对齐方式
启用 flex-wrap: wrap 后，可以配合以下属性优化多行布局的对齐：
- justify-content：控制每行中子项在主轴（默认横向）上的对齐方式，如 flex-start、center、space-between
- align-items：控制单行内子项在交叉轴（纵向）的对齐
- align-content：控制多行整体在交叉轴上的分布，比如多行之间留空隙或顶部对齐
例如，让多行内容垂直居中并均匀分布：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
height: 300px;
}
响应式场景下的实用技巧
结合媒体查询和 flex-wrap，可轻松实现响应式布局。
比如在小屏幕上强制换行：
.container {
display: flex;
flex-wrap: wrap;
}
<p>.item {
flex: 1 1 200px; /<em> 最小宽度约200px，可伸缩 </em>/
}
当容器宽度不足时，每个子项达到最小宽度就会自动换行，形成多行等宽布局。
基本上就这些。合理使用 flex-wrap 能让弹性布局更适应不同内容量和屏幕尺寸，避免溢出或空白，提升页面美观度和可用性。
