CSS分栏布局

分栏布局将区域划分为若干垂直的栏，子元素放置到栏中，填满一个后再填充下一个。如果设置了 column-count 栏数量或 column-width 栏宽度，元素就成为分栏容器。需要注意， column-width 实际上是最小栏宽度。浏览器使用这个值计算栏的数量，如果还有额外的空间，浏览器会增加栏的实际宽度。

如果内容不能填满所有栏，可以使用 column-fill 属性，将内容优先填满靠左侧的栏，或者平均分配到每个栏中。

代码1  column-fill属性

column-fill: auto;      /* 内容优先填充靠左侧的栏。 */
column-fill: balance;   /* 内容平均分配到每个栏中。 */

各栏之间的距离通过 column-gap 属性控制。

代码2  column-gap属性

column-gap: 8px;
column-gap: 10%;

栏与栏之间存在一条界线，和边框、轮廓一样，它也有3个样式属性和属性简写：

代码3  column-rule-*

column-rule-color: red;      /* 界线色彩。 */
column-rule-style: dotted;   /* 界线风格。 */
column-rule-width: 12px;     /* 界线宽度。 */
column-rule: solid 6px blue; /* 属性简写。 */

如果希望分栏容器中的某个子元素跨越所有的栏，可以将子元素的 column-span 属性设置为 all 。

CSS为分栏属性提供了简写：

代码4  columns简写

columns: 20em;       /* column-width: 20em; */
columns: 2;          /* column-count: 2; */
columns: 2 auto;     /* column-count: 2; column-width: auto; */
columns: auto 12em;  /* column-count: auto; column-width: 12em; */