column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

CSS column-gap 属性用来设置元素列之间的间隔(gutter)大小。

尝试一下

column-gap 一开始是 Multi-column 布局下的特有属性,后来在其他布局中也使用这个属性。如 CSS 盒子对齐中的表述,该属性已经可以在 Multi-column(多列布局)、Flexible Box(弹性盒子)以及 Grid layout(网格布局)中使用。

语法

css
/* 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 属性可以用以下值来表示。

取值

normal

表示列之间的间隔宽度。在 多列布局 时默认间隔为 1em,其他类型布局默认间隔为 0。

<length>

<length> 来定义列之间的间隔大小。而且 <length> 值必须是非负数的。

<percentage>

<percentage>(百分比)来定义列之间的间隔大小。同样的,<percentage> 值也必须是非负数的。

形式定义

初始值normal
适用元素multi-column elements, flex containers, grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
计算值as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
动画类型a length, percentage or calc();

形式语法

column-gap = 
normal |
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

示例

Flex 布局

HTML

html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

结果

Grid 布局

HTML

html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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;
}

结果

Multi-column 布局

HTML

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

css
.content-box {
  column-count: 3;
  column-gap: 40px;
}

结果

规范

Specification
CSS Box Alignment Module Level 3
# column-row-gap
CSS Grid Layout Module Level 2
# gutters
CSS Multi-column Layout Module Level 1
# column-gap

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-gap
Supported in Flex Layout
Supported in Grid Layout
Supported in Multi-column Layout
calc() values
<percentage> values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见