column-fill

当您向多列元素添加高度时，您可以控制内容填充列的方式。 内容可以平衡填充或按顺序填充。

ul {
  height: 300px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}

此属性仅在 Firefox 中可用。 Firefox 会在高度受限的多列布局中自动平衡内容。 当给定高度约束时，其他浏览器将始终按顺序填充列。

要使 Firefox 的行为类似于其他浏览器，即按顺序填充列，您可以设置 column-fill: auto。

值

column-fill 接受关键字值 balance 和 auto。

balance 将用大约相同数量的内容填充每列，但不会允许列比 height 更高。 您可能会发现列会比 height 短，因为浏览器会均匀地水平分布内容。

auto 将填充每列，直到它达到 height，并重复此操作，直到内容用完。 考虑到内容，此值不一定填充所有列，也不一定均匀填充它们。

这有点像把果汁倒进玻璃杯里。 您可以将相同数量的果汁倒入每个杯子中，并发现您没有将每个杯子都装满到顶部 (balance)。 或者，您可以将玻璃杯装满到顶部，直到它装满，并重复此操作，直到没有果汁剩余。 结果，剩余的玻璃杯可能会有更少或没有果汁 (auto)。

查看示例 column-fill 示例 [CSS-Tricks] 由 CSS-Tricks (@css-tricks) 在 CodePen 上创建。

相关属性

• columns
• column-count
• column-gap
• column-rule
• column-span
• column-width

其他资源

• MDN 文档
• CSS3 规范
• Can I Use

浏览器支持

column-fill 关键字值特别是在 Firefox 中有效。 它们在 2014 年 8 月 (最初撰写此年鉴条目时) 无法使用，但在 2015 年 8 月 (Chrome 44) 再次测试时可以使用。 在该测试过程中，似乎动态更改值不起作用，您必须 强制重新布局。

对多列布局的浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	3+	1.5+	11.1+	10+	2.3+	6.1+

不要忘记您的前缀！