flex-wrap: wrap 可使 Flex 子元素在空间不足时自动换行。默认 nowrap 不换行，wrap 允许换行且新行在下方，wrap-reverse 新行在上方。结合 justify-content 控制行内对齐，align-content 控制多行垂直分布，并可通过 flex 和 gap 实现响应式布局。
在使用 CSS Flexbox 布局时，当容器内的子元素总宽度超过容器宽度，默认情况下它们会被压缩在同一行。如果希望子元素在空间不足时自动换行，就需要使用 flex-wrap 属性。通过设置 flex-wrap: wrap，可以让 Flex 项目在超出容器时自动换到下一行，实现灵活的多行布局。
flex-wrap 的取值说明
flex-wrap 属性决定了 Flex 容器中的项目是否可以换行以及换行的方向。它有以下三个常用值：
- nowrap：默认值，所有项目都排列在一行（即使溢出容器）
- wrap：允许项目在必要时换行，第二行在第一行下方
- wrap-reverse：允许换行，但行的堆叠顺序是反向的（新行出现在上方）
启用换行的基本用法（wrap）
要让 Flex 子元素在超出容器时自动换行，只需在 Flex 容器上设置 flex-wrap: wrap：
.container {
display: flex;
flex-wrap: wrap; /* 启用换行 */
gap: 10px; /* 可选：设置项目之间的间距 */
}
<p>.item {
flex: 0 0 200px; /<em> 固定每个项目的最小宽度，不伸缩 </em>/
}</p>在这个例子中，每个子项宽度为 200px，当容器宽度不足以容纳更多项目时，它们会自动换到下一行。
立即学习“前端免费学习笔记（深入）”；
控制换行行为与对齐方式
换行后，可以使用 justify-content 控制每行内项目的对齐方式，使用 align-content 控制行与行之间的对齐分布：
- justify-content：如 space-between、center、flex-start 等，作用于单行内的项目
- align-content：只在有多行时生效，可设为 flex-start、center、space-between、stretch 等，控制行之间的垂直分布
例如，让多行内容在容器中均匀分布：
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px; /* 需要有固定高度才能看到效果 */
}
响应式布局中的实用技巧
结合媒体查询和弹性宽度，可以轻松实现响应式卡片布局：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
<p>.item {
flex: 1 1 250px; /<em> 最小宽度 250px，可伸缩 </em>/
}</p>这样，在宽屏下每行显示多个项目，窄屏下自动减少每行数量并换行，无需额外 JS 或复杂计算。
基本上就这些。掌握 flex-wrap 是构建现代响应式布局的关键一步，配合 flex 属性和 gap 间距，能快速搭建整齐美观的多行内容区域。
