CSS row-gap 语法
在 CSS 中，row-gap 属性用于定义 flex 容器以及 grid 容器中两行子项之间的间距。
语法：
row-gap: 长度值 | 百分比;说明：
row-gap 属性取值是一个长度值（比如 px、em 等）和百分比。
对于 row-gap 属性，小伙伴们还要清楚以下几点。
- row-gap 既可以用于 flex 布局，也可以用于 grid 布局。
- row-gap 属性只在存在多行时才有效。如果只有单行网格或单行弹性子项，row-gap 不会有任何可见效果。
- row-gap 只在行之间创建间距，不会在容器的顶部或底部创建额外的间距。
CSS row-gap 摘要
| 属于 | CSS Flex 布局 / CSS Grid 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS row-gap 示例
接下来，我们通过一个简单的例子来讲解一下 row-gap 属性是如何使用的。
示例：row-gap 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 100%;
height: 500px;
background-color: skyblue;
}
.box > div {
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>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用 flex-direction: column; 来设置子元素的方向为纵向排列。然后使用 row-gap 属性设置行与行之间的间距。
需要清楚的是：只有存在多行时，row-gap 才会生效；而只有存在多列时，column-gap 才会生效。道理很简单，稍微想一下就明白了。
gap 是一个复合属性
在 CSS 中，gap 是一个复合属性，它有 2 个子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| row-gap | 定义行与行之间的间距 |
| column-gap | 定义列与列之间的间距 |
