多栏式布局

多栏式布局是 CSS 原生提供的一种内容分栏显示的解决方案。

基本用法

column-count属性指定div的子元素分成四栏。

div {
  column-count:4;
}

column-width属性指定每一栏的宽度。

div {
  column-width:100px;
}

上面代码中，column-width属性指定每一栏的宽度是100像素。如果div元素的宽度是800像素，那么内容就将分成8栏。

注意，column-count与column-width不应同时使用，它们之中同时只能有一个属性生效。另外，设定position: fixed和position: absolute子元素，将不纳入多栏式布局的栏计算。

多栏式布局对栏与栏之间的间隔，提供了如下属性。

column-gap：间隔宽度
column-rule-color：间隔线的颜色
column-rule-style：间隔线的样式，比如dashed、dotted等，默认是solid
column-rule-width：间隔线本身的宽度
column-rule：column-rule-color、column-rule-style、column-rule-width这三个属性的快捷形式。

div {
    column-gap: 20px;
    column-rule: 2px solid #33c;
}

上面代码指定栏与栏之间的间隔是20px，间隔线的样式是2px solid #33c。

column-span属性指定某个子元素可以占据多栏的宽度，比如标题。它只能设两个值all和none。

h2 {
  column-span: all;
}

column-fill属性指定内容如何在多栏之间分配。

默认值balance表示栏与栏是等高的，auto表示只占据内容所需的空间。

浏览器会自己决定，内容在栏与栏之间如何断点。下面的三个属性可以调整这个行为。

break-inside属性决定子元素内部如何断点。它可以取以下值。

break-before属性决定子元素前方如何断点。它可以取以下值。

break-after属性决定子元素后方如何断点。它可以取以下值。