flex-wrap 属性有三个可能的值：
1. nowrap: 默认值。所有的 flex 元素都在一行上，可能会导致溢出容器。
2. wrap: flex 元素将显示在多行，从上到下排列。
3. wrap-reverse: 与 wrap 相似，但是排列顺序是从下到上。
以下是一个简单的示例，演示了 flex-wrap 的用法：
.flex-container {
display: flex;
flex-wrap: wrap; /* 或 flex-wrap: nowrap; 或 flex-wrap: wrap-reverse; */
}
.flex-item {
flex: 1;
margin: 10px;
height: 100px;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
在这个例子中，.flex-container 是一个 flex 容器，其子元素 .flex-item 将会在 flex 容器内部进行排列。flex-wrap: wrap; 意味着 flex 元素可以多行显示，如果空间不足，它们将会换行。您还可以尝试使用 nowrap 或 wrap-reverse 观察效果。
转载请注明出处：http://www.zyzy.cn/article/detail/4186/CSS