CSS column-fill 属性-之路教程

CSS column-fill 属性

column-fill 属性定义列是否平均填充。

column-fill 属性是 CSS3 属性之一。

如果将高度添加到多列元素，则可以控制列如何填充内容。
内容可以平衡或者顺序填充。
因此，它有两个值：balance 和 auto。
“balance”是默认值。
内容在列之间平均分配。
如果列由“自动”值指定，则内容占用它需要的空间。

Firefox 会自动平衡高度受限的多列布局中的内容，而其他浏览器在给定高度约束时总是按顺序填充列。

初始值	balance
应用于	多色元素。
继承	无效
可动画的	无效
版本	CSS3
DOM 语法	object.style.columnFill=“auto”；

语法

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

具有 "balance" 值的 column-fill 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .balance {
        column-count: 4;
        column-rule: 1px solid black;
        column-fill: balance;
      }
    </style>
  </head>
  <body>
    <h1>Column-fill 属性示例</h1>
    <p class="balance">
       CSS column-fill 属性用于将内容均匀地分布在所有列中。
    </p>
  </body>
</html>

具有“auto”值的列填充属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto {
        column-count: 3;
        column-rule: 1px solid black;
        -webkit-column-fill: auto;
        -moz-column-fill: auto;
        column-fill: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-fill 属性示例</h1>
    <p class="auto">
       CSS column-fill 属性用于将内容均匀地分布在所有列中。 
	   CSS column-fill 属性用于将内容均匀地分布在所有列中。 
	   CSS column-fill 属性用于将内容均匀地分布在所有列中。 
    </p>
  </body>
</html>

CSS column-fill 属性值说明

值	说明
auto	按顺序填充列。
balance	在列之间平均分配内容。在分页媒体中，只有最后一页是平衡的。
balance-all	在列之间平均分配内容。在分页媒体中，所有页面都是平衡的。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

日期：2020-06-02 22:14:22 来源：oir作者：oir

←CSS column-count 属性

CSS column-gap 属性→

语法

具有 "balance" 值的 column-fill 属性示例：

具有“auto”值的列填充属性示例：

CSS column-fill 属性值说明

目录