CSS | column-fill Property

CSS的column-fill属性指定如何分配内容到多列布局中的列中。该属性允许你控制内容在多列中的分配方式及其间距的自动平衡程度。

语法

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

属性值说明

• auto：默认值。行高不同，导致在最后一列中可能出现空白空间。
• balance：所有列的高度和宽度都是相等的。最后一列和之前的列中每个元素的高度和宽度也是相等的。
• inherit：继承父元素的column-fill属性值。
• initial：将属性设置为其默认值auto。
• unset：继承父元素的column-fill属性值，如果没有继承值，则使用初始值。

代码示例

/* 将所有列的内容均匀分配，使其高度和宽度一致 */
div {
    column-count: 3;
    column-fill: balance; 
}

浏览器兼容性

| Chrome | Firefox | Safari | Edge | IE | Opera | | ------ | ------- | ------ | ---- | -- | ----- | | 50+ | 52+ | 9+ | 12+ | 10+| 37+ |

注意事项

该属性只对具有多列布局的元素起作用，如通过column-count和column-width属性定义。此外，该属性在Safari中不适用于Paged Media，因为其输出和显示窗格不支持它。

参考资料

• MDN Web 文档
• W3Schools