column-gap
**column-gap
** CSS 属性设置元素列之间的间隙(gutter)的大小。
最初是 多列布局 的一部分,column-gap
的定义已扩展到包括多种布局方法。现在在 CSS 盒子对齐 中指定,它可以在多列、弹性盒子和网格布局中使用。
规范的早期版本将此属性称为 grid-column-gap
,为了与旧网站保持兼容,浏览器仍然接受 grid-column-gap
作为 column-gap
的别名。
试试看
语法
/* Keyword value */
column-gap: normal;
/* <length> values */
column-gap: 3px;
column-gap: 2.5em;
/* <percentage> value */
column-gap: 3%;
/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;
column-gap
属性指定为以下列出值之一。
Values
normal
-
浏览器使用默认间距在列之间。对于多列布局,这指定为
1em
。对于所有其他布局类型,它为 0。 <length>
<percentage>
-
列之间间隙的大小,定义为
<percentage>
。<percentage>
属性的值必须为非负数。
正式定义
Initial value | normal |
---|---|
Applies to | 多列元素、弹性容器、网格容器 |
Inherited | no |
Percentages | 指内容区域的对应维度 |
Computed value | 如指定,将 <length>s 设为绝对值,并将 normal 计算为零,但多列元素除外 |
Animation type | a length, percentage or calc(); |
正式语法
column-gap =
normal |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
Flex layout
在此示例中,弹性容器包含六个不同宽度的弹性项目 (200px
和 300px
),创建没有像网格一样布局的弹性项目。column-gap
属性用于在相邻弹性项目之间添加水平空间。
HTML
<div class="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
要创建弹性容器,我们将设置其 display
属性值设置为 flex
。然后我们使用 flex-flow
简写属性将 flex-direction
设置为行(默认值)并将 flex-wrap
设置为 wrap
,允许弹性项目在需要时流向新行。默认情况下,弹性项目会拉伸到与容器一样高。通过设置 height
,即使是空的弹性项目也会是 100px
高。
为了更好地展示 `column-gap` 属性,此示例中的弹性项目具有两种不同的宽度值。弹性项目的宽度是在 `<div>` 弹性项目内设置的。我们使用 flex-basis
作为 flex
简写属性的一部分,使所有弹性项目宽度为 `200px`。然后,我们使用 :nth-of-type(3n)
选择器,将每个第三个弹性项目的宽度改为 `300px`。
在弹性容器上将 `column-gap` 值设置为 `20px`,以便在每行中相邻弹性项目之间创建 `20px` 的间隙。
.flexbox {
display: flex;
flex-flow: row wrap;
height: 100px;
column-gap: 20px;
}
.flexbox > div {
border: 1px solid green;
background-color: lime;
flex: 200px;
}
div:nth-of-type(3n) {
flex: 300px;
}
结果
网格布局
HTML
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
column-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
结果
多列布局
HTML
<p class="content-box">
This is some multi-column text with a 40px column gap created with the CSS
`column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
CSS
.content-box {
column-count: 3;
column-gap: 40px;
}
结果
规范
规范 |
---|
CSS 盒子对齐模块级别 3 # column-row-gap |
CSS 网格布局模块级别 2 # 边距 |
CSS 多列布局模块级别 1 # column-gap |
浏览器兼容性
BCD 表格仅在浏览器中加载