CSS | column-fill 属性

CSS的column-fill属性定义了如何分配内容在多列布局中的空白空间。

语法

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

• auto：默认值。每个列的长度是由内容决定的。如果一个列的内容比其它所有列都长，那么这一列将会比其它列更长。
• balance：每个列的长度平均分配空白空间。
• inherit：从父元素继承column-fill属性的值。
• initial：将column-fill属性设置为它的默认初始值auto。
• unset：将column-fill属性重置为它的默认值auto或继承值。

示例

div {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;

  -moz-column-fill: auto;
  -webkit-column-fill: auto;
  column-fill: auto;
}

以上代码将每个div分成3个列，并且使用default的column-fill值. 这意味着每个列的长度是由内容决定的。如果一个列的内容比其它所有列都长，那么这一列将会比其它列更长。

div {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;

  -moz-column-fill: balance;
  -webkit-column-fill: balance;
  column-fill: balance;
}

以上代码将每个div分成3个列，并且使用balance的column-fill值. 这意味着每个列的长度平均分配空白空间。

浏览器支持

column-fill属性在所有的主流浏览器中均有支持。具体支持情况请参考 https://caniuse.com/?search=column-fill

总结

column-fill属性可以让开发者在多列布局中方便地控制内容。它能够让每一栏的长度如何分配灵活地进行设置，以达到不同的布局效果。