CSS flex-wrap 语法
在 CSS 中，flex-wrap 属性用于定义 flex 容器中子项是否换行显示，也就是子元素是 “单行显示” 还是 “多行显示”。
语法：
flex-wrap: 关键字;说明：
flex-wrap 属性的取值有 3 种，如下表所示。
| 属性 | 说明 |
|---|---|
| nowrap（默认值） | 单行显示 |
| wrap | 换行显示，也就是多行显示 |
| wrap-reverse | 换行显示，但却是反方向 |
当 flex-wrap 的值为 wrap 或 wrap-reverse 时，flex 容器会成为多行容器，此时可以使用 align-content 属性来控制这些行在交叉轴上的对齐方式。
注意: flex-wrap 属性只会作用于 flex 容器 (display: flex; 或 display: inline-flex;)。
CSS flex-wrap 摘要
| 属于 | CSS flex 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | nowrap |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS flex-wrap 示例
接下来，我们通过一个简单的例子来讲解一下 flex-wrap 属性是如何使用的。
示例：flex-wrap 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
width: 500px;
height: 500px;
background-color: skyblue;
}
.box > div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid silver;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，flex 布局的子元素都是横向排列，即使总宽度大于父元素宽度也不会换行，并且会 “压缩” 以适应父元素宽度。
如果父元素使用的是 flex-wrap: wrap;，此时页面效果如下图所示。
可以看到，虽然子元素是换行显示了，但被换行的子元素是在剩余空间上垂直居中，而不是在第二行开始。为了解决这个问题，我们可以不给父元素设置高度。将父元素高度（即 height: 500px;）删除之后，效果如下图所示。
如果给父元素设置 flex-wrap: wrap-reverse;，此时页面效果如下图所示。
flex-flow 是一个复合属性
在 CSS 中，flex-flow 是一个复合属性，它有 2 个子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| flex-direction | 定义 flex 容器的主轴方向 |
| flex-wrap | 定义 flex 容器中子项是否换行显示 |
