CSS column-gap 语法
在 CSS 中，column-gap 属性用于定义 flex 容器或 grid 容器中两列子项之间的间距。
语法：
column-gap: 数值;说明：
column-gap 属性取值是一个数值，比如像素值（px）、百分比（%）、rem 等。
对于 column-gap 属性，小伙伴们还要清楚以下几点。
- column-gap 属性适用于多列容器、flex 容器和 grid 容器。
- column-gap 只在存在多列时才有效。如果只有单列网格、单列弹性项目或单列文本，column-gap 将不会有任何可见效果。
- column-gap 只在列之间创建间距，不会在容器的左侧或右侧创建额外的间距。
CSS column-gap 摘要
| 属于 | CSS Multi-column 布局 / CSS Flex 布局 / CSS Grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | 0 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS column-gap 示例
接下来，我们通过一个简单的例子来讲解一下 column-gap 属性是如何使用的。
示例 1：column-gap 用于 flex 布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
display: flex;
column-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>页面效果如下图所示。
分析：
column-gap 设置的是列与列之间的间隙。由于这里只有一行，因此你再去设置 row-gap 是无效的，可以自行试一下。
需要清楚的是：只有存在多行时，row-gap 才会生效；而只有存在多列时，column-gap 才会生效。道理很简单，小伙伴们稍微想一下就明白了。
示例 2：column-gap 用于多列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
width: 400px;
padding: 10px;
border: 1px solid silver;
column-count: 2;
column-gap: 30px;
}
</style>
</head>
<body>
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用 column-gap 属性定义列间距为 30px。
gap 是一个复合属性
在 CSS 中，gap 是一个复合属性，它有 2 个子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| row-gap | 定义行与行之间的间距 |
| column-gap | 定义列与列之间的间距 |
