CSS column-fill属性用于指在多列布局中，每一个列的内容如何填充和分配。

使用CSS column-fill属性，你可以控制列的内容是均匀分配还是自动分配。

内容均匀分配也叫平衡模式，该模式中，浏览器（或use agent）会调整各个列的高度，使各个列的内容的高度基本一致。而自动分配模式会使内容按顺序分配在各个列中，各个列的高度可能不一样。

当多列布局中，当列的高度被明确指定的时候，column-fill属性的效果就会非常明显。

下面的图片展示了平衡模式和自动分配模式的效果：

官方语法

column-fill: auto | balance                
                            

参数：

• balance：平衡模式，各个列的内容高度基本一致。
• auto：列的内容按顺序分布，各个列中内容的高度不一定相同。

column-fill属性的初始值为auto。

应用范围

column-fill属性可以应用在所有多列布局元素上。

示例代码

下面是column-fill属性的一些取值的示例代码：

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

column-fill: inherit;                              
                            

下面是一个实际应用的示例代码：

.columns{
  width: 100%;
  height: 350px;
  -moz-columns: 2em 3;
  -webkit-columns: 2em 3;
  columns: 2em 3;

  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  
  text-align: justify;
}                              
                            

在线演示

注意，column-fill属性目前只有Firefox浏览器才支持，所以下面的演示需要在Firefox浏览器中才可以看到效果：

column-fill: balance

浏览器支持

目前只有Firefox浏览器支持column-fill属性。