CSS flex-flow 语法
在 CSS 中，flex-flow 属性是一个复合属性，它用于同时设置 flex-direction、flex-wrap 这两个属性的值。
语法：
flex-flow: direction wrap;说明：
参数 direction 是 flex-direction 的取值，而参数 wrap 是 flex-wrap 的取值。因此，flex-flow 属性的默认值为 “row nowrap”。
提示: 在实际开发中，并不推荐使用 flex-flow 这个复合属性，而是推荐单独使用 flex-direction 和 flex-wrap。
CSS flex-flow 摘要
| 属于 | CSS flex 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | row nowrap |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS flex-flow 示例
接下来，我们通过一个简单的例子来讲解一下 flex-flow 属性是如何使用的。
示例：flex-flow 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
width: 500px;
height: 200px;
background-color: skyblue;
flex-flow: row wrap;
}
.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-flow: row wrap; 这一句代码等价于：
flex-direction: row;
flex-wrap: wrap;