CSS学习笔记：columns

概述

太长的文本行十分不容易阅读，CSS多列布局就是允许简单地定义多列文本。

使用多列布局

列计数器和宽度

有两个CSS属性控制是否实现多列布局和显示多少列： column-count 和column-width。
这两个属性可以同时使用，也可以只使用其中一个。

• column-count 设置特定数量的列数，宽度会自动计算。
• column-width 设置期望的最小列宽。如果 column-count 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。

如果同时设置了以上二者，那么column-count值就被当做栏目的最大值。
比如，对于250px的容器，如果设置column-width为100px，column-count为3，那么浏览器会生成2栏而不是3栏。

在多列块中，内容会自动从一列换到另一列中。

columns 属性简写

columns属性是以上两个属性的简写属性。

columns: 1em;/*column-width列的长度值*/
columns: 1;/*column-count列数*/
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

高度平衡

CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。

然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。
因此，如果通过设置height 或 max-height 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。

column-gap

列之间有缝隙。该值可通过设置多列模块的 column-gap 属性来修改。
如果没有设置column-gap值，则每个浏览器分别为其指定默认值。
一般最好使用em单位的长度，这样空隙能够随着文字大小的变化而变化。

column-rule

用于给间隔增加竖线样式实现视觉分隔。
也是一个简写属性，包含以下三个属性：

• column-rule-width ：线的宽度
• column-rule-style：线的样式，和border-style取值相同。
• column-rule-color：颜色

渐进增强与优雅降级

其实多栏布局是一项典型的渐进增强技术，多列属性会被不支持多列模型的浏览器忽略。因此，为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。