column-fill

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.

column-fill CSS 属性可控制元素内容分成列时的平衡方式。

尝试一下

语法

css
/* 关键字值 */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* 全局值 */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

column-fill 属性可指定为下列关键字值之一。初始值为 balance,这样内容就会在各列之间中保持平衡。

取值

auto

按顺序填充列。内容只占用其所需的空间,可能导致某些列保持空白。

balance

内容平均分配到各列。在片段式上下文中,如 CSS 分页媒体,只有最后一个片段是平衡的。因此,在分页媒体中,只有最后一页是平衡的。

balance-all 实验性

内容平均分配到各列。在片段式上下文中,如 CSS 分页媒体,所有片段都是平衡的。

形式定义

初始值balance
适用元素multicol elements
是否是继承属性
计算值as specified
动画类型离散值

形式语法

column-fill = 
auto |
balance |
balance-all

示例

平衡列内容

HTML

html
<p class="fill-auto">
  本段一次填满一列。由于所有文字都可以填入第一列,所以其他列是空的。
</p>

<p class="fill-balance">
  这一段试图平衡各列的内容量,使用 CSS <code>balance</code>
  属性来平衡各列。
</p>

CSS

css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}

结果

规范

Specification
CSS Multi-column Layout Module Level 1
# cf

浏览器兼容性

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-fill
auto
balance

Legend

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

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

警告: 由于规范中的一些问题尚未解决,column-fill 在不同浏览器之间存在一些交互操作性问题和错误。

特别是在使用 column-fill: auto 按顺序填充列时,Chrome 浏览器只有在多列容器具有区块尺寸(例如水平书写模式下的高度)时才会参考此属性。而 Firefox 浏览器则会始终查询该属性,因此在没有尺寸的情况下,会在第一列填充所有内容。

参见