CSS flex-wrap 属性确定 flex 项目是应保留在单行上，还是允许换行到多行上。当允许换行时，它确定线的堆叠方向。
可能的值
- nowrap - 默认值。弹性物料放置在一条线中，该行可能会延伸到弹性容器之外。根据 flex-direction 的值，交叉起始由起始点或之前定义。
- wrap − flex 项目分成多行。交叉启动与开始相同或之前相同，具体取决于 flex-direction 值，而交叉端与给定的交叉启动相反。
- wrap-reverse − 它包裹类似于 wrap 的 flex 项目，但 cross-start 和 cross-end 的位置是互换的。
适用于
Flex 容器。
语法
flex-wrap: nowrap|wrap|wrap-reverse;
CSS flex-wrap - nowrap 值
以下示例演示了 flex-wrap： nowrap 属性，当浏览器窗口水平调整大小时，flex 项将保持在同一行上，即使它们溢出了 flex 容器 -
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: green;
}
.flex-container>div {
background-color: yellow;
padding: 10px;
margin: 10px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h3>As you resize the browser window, flex items will remain on a single line.</h3>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS flex-wrap - 包装值
以下示例演示了 flex-wrap： wrap 属性允许 flex 项目在无法放入一行中时分成多行 -
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: green;
}
.flex-container>div {
background-color: yellow;
padding: 10px;
margin: 10px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h3>As you resize the browser window, flex items should move to a new line inside their container.</h3>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS flex-wrap - 换行-反向
以下示例演示了 flex-wrap： wrap-reverse 属性将 flex 项排列在多行中，并以相反的顺序包装 flex 项 -
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
background-color: green;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h3>As you resize the browser window, flex items should move to a new line in reverse order.</h3>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
