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

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

CSS Grid Layout 起初是用 grid-gap 属性来定义的,目前逐渐被 gap 替代。但是,为了兼容那些不支持 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: unset;

 column-gap 属性有以下值来表示。

取值

normal

表示列之间的间隔宽度。在 多列布局 时默认间隔为1em,其他类型布局默认间隔为 0。
<length>
<length>来定义列之间的间隔大小。而且 <length> 值必须是非负数的。
<percentage>
<percentage>(百分比)来定义列之间的间隔大小。同样的,<percentage> 值也必须是非负数的。

正式语法

normal | <length-percentage>

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

示例

Flex布局

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

HTML

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

CSS

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

#flexbox > div {
  background-color: lime;
  flex: auto;
}

结果

Grid布局

HTML

<div id="grid">
  <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 {
  background-color: lime;
}

结果

Multi-column布局

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 Box Alignment Module Level 3
column-gap
Working Draft 在弹性布局和网格布局中应用
CSS Grid Layout
column-gap
Candidate Recommendation 描述在网格布局中的作用
CSS Multi-column Layout Module
column-gap
Working Draft 初始化定义

初始值normal
适用元素multi-column elements, flex containers, grid containers
是否是继承属性
Percentagesrefer to corresponding dimension of the content area
适用媒体visual
计算值as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();
正规顺序per grammar

浏览器兼容性

在 Flex 布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

在 Grid 布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Firefox Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1
Alternate Name
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
WebView Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 4.4
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 4.4: this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile No support NoFirefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Safari iOS Full support 10.3
Alternate Name
Full support 10.3
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Samsung Internet Android Full support 6.0
Alternate Name
Full support 6.0
Alternate Name
Alternate Name Uses the non-standard name: grid-gap

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

在 Multi-column 布局中的兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 52
Full support 52
Full support 1.5
Prefixed Notes
Prefixed Requires the vendor prefix: -moz-
Notes Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Full support 10Opera Full support 37
Full support 37
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 11.1 — 15
Safari Full support 10
Full support 10
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile No support NoFirefox Android Full support 52
Full support 52
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 37
Full support 37
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 11.1 — 14
Safari iOS Full support 10
Full support 10
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 5.0
Full support 5.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
<percentage> values
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 61IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 61Opera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No
calc() values
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 61IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 61Opera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

此页面的贡献者: narol, Minya_Chan, billcz, fscholz, Sebastianz, FredWe
最后编辑者: narol,