flex-wrap 是一个 CSS 属性，它定义了 flex 容器内的 flex 元素如何排列。默认情况下，flex 容器中的所有 flex 元素都会尽可能地占据主轴空间，如果空间不够，它们会缩小以适应主轴。但是，使用 flex-wrap 属性可以控制当 flex 元素在主轴上无法放置时会发生什么。
如果 flex-wrap 属性设置为 wrap，则当 flex 元素在主轴上无法容纳时，它们将开始在下一行（或列，如果 flex-direction 设置为 column）上继续排列。这意味着 flex 元素可以跨越多行（或列）进行排列，而不是在单独的一行上尽可能地堆叠。
例如，下面的 CSS 代码会将一个 flex 容器内的 flex 元素按照从左到右的顺序排列。当容器的宽度不足以容纳所有元素时，它们将换到下一行进行排列：
.container {
display: flex;
flex-wrap: wrap;
}
通过设置 flex-wrap 属性，你可以控制 flex 容器中的 flex 元素在主轴上的排列方式，以及当空间不足时如何处理这些元素。
除了 wrap，flex-wrap 属性还有其他可选值，它们分别是：
nowrap：默认值，flex 元素会在一行（或一列）上尽可能地堆叠，即使它们的宽度（或高度）超过了容器的宽度（或高度）。
wrap-reverse：与 wrap 类似，但是 flex 元素会从容器底部开始排列，而不是从顶部开始。
这里是一个 flex-wrap 属性的例子，它使用 nowrap 值，将 flex 容器内的 flex 元素堆叠在一行上：
.container {
display: flex;
flex-wrap: nowrap;
}
注意，flex-wrap 属性只对多行（或列） flex 容器有效。如果容器只有一行（或列），则 flex-wrap 属性不会生效。
此外，还有一个与 flex-wrap 类似的属性，叫做 overflow-wrap，它可以控制元素在容器边缘处的换行方式。但是，overflow-wrap 属性只适用于文本，而不适用于 flex 元素。