column-fill

column-fill CSS 属性控制元素内容在分割成列时如何平衡。

试试看

语法

css
/* Keyword values */
column-fill: auto;
column-fill: balance;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

column-fill 属性指定为以下列出的关键字值之一。初始值为 balance，因此内容将在各列之间平衡。

值

auto

列按顺序填充。内容只占用它需要的空间，可能会导致某些列保持为空。

balance

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

正式定义

初始值balance
应用于多列元素
继承否
计算值如指定
动画类型离散

正式语法

column-fill = 
  auto         |
  balance      |
  balance-all

示例

平衡列内容

HTML

html
<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in
  the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</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;
}

结果

规范

规范
CSS 多列布局模块级别 1
# cf

浏览器兼容性

BCD 表格仅在浏览器中加载

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

特别是，当使用 column-fill: auto 按顺序填充列时，Chrome 仅在多列容器在块维度 (例如，在水平书写模式中为高度) 具有大小的情况下才会参考此属性。Firefox 将始终参考此属性，因此在没有大小的情况下，会将所有内容填充到第一列。

另请参阅