CSS3 column-fill 属性

CSS3 column-fill 属性设置内容分栏的填充方式。

应用场景： 当将内容分成多个栏时，为了使页面整齐美观，我们需要一些方法来调整内容的分布和填充方式。此时， column-fill 属性就非常实用，通过它我们可以调整内容分栏的填充方式，使页面更美观。

语法

column-fill: balance | auto | initial | inherit;

取值

• balance - 每一列的高度尽量相等，适合填充内容较少的情况。
• auto - 自动填充，每一列的高度可能不相等，适合填充内容较多的情况。
• initial - 设置为默认值。
• inherit - 从父元素继承。

实例

div{
  -webkit-column-count: 3; /* 多列布局 */
  -moz-column-count: 3;
  column-count: 3;
  column-fill: auto; /* 自动填充 */
}

在上述实例中，我们设置了将页面分成三栏布局，并使用 column-fill 属性将内容自动填充至每一栏，这样可以避免某个栏过多或过少，使得页面更加美观。

浏览器支持

注意事项

• column-fill 属性必须与 column-count 属性一起使用。
• 使用 column-fill 属性时，浏览器会尝试将内容平均分配到每一列中，如果某一列的内容太多，会导致其他列无法填满，这时会出现空白，因此在使用该属性时需要灵活掌握，根据实际情况进行调整。

总结

CSS3 column-fill 属性非常实用，在进行页面设计时，可以根据分栏的具体情况选择适当的取值，使得页面更加美观。同时，需要注意该属性的使用方法和注意事项，以免出现不必要的错误。