CSS3 Column

CSS3中Column用于设置多列布局（multi-column），也就是分栏的效果，主要用于竖列排版，它是传统HTML页面中块级布局模式的扩展，典型案例如报纸中新闻排版的效果。

多列布局属性

关键词：列数、列宽、间隔、边框、跨列、高度、断行

属性	描述
columns	复合属性，设置最大列数和单列最小宽度。
column-count	设置最大列数
column-width	栏间距，设置象单例最小宽度。
column-gap	列间距，设置列与列之间间隙的宽度。
column-rule	设置列与列之间的边框
column-rule-widht	设置列与列之间边框的厚度
column-rule-style	设置列与列之间边框的样式
column-rule-color	设置列与列之间边框的样式
column-span	设置是否跨越所有列
column-fill	设置所有列高度是否统一
column-break-before	设置列之前是否断行
column-break-after	设置列之后是否断行
column-break-inside	设置列内部是否断行

例如：图片分栏

图片分栏

<style>
*{margin:0; padding:0;}
.multi-column{columns:auto 4; column-gap:1em; padding:10px; background-color:#ff0;}
.img-border{padding:1em; border:2px solid #f2f2f2; border-radius:4px; background-color:rgba(255, 255, 255, 0.85); cursor:pointer; margin-bottom:1em;}
</style>
<div class="multi-column">
  <div class="img-border"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="100%"/></div>
  <div class="img-border"><img src="https://unsplash.it/1600/900?random" width="100%"/></div>
  <div class="img-border"><img src="https://api.dujin.org/bing/1366.php" width="100%"/></div>
  <div class="img-border"><img src="http://api.mtyqx.cn/api/random.php" width="100%"/></div>
  <div class="img-border"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="100%"/></div>
  <div class="img-border"><img src="https://unsplash.it/1600/900?random" width="100%"/></div>
  <div class="img-border"><img src="https://api.dujin.org/bing/1366.php" width="100%"/></div>
  <div class="img-border"><img src="http://api.mtyqx.cn/api/random.php" width="100%"/></div>
</div>

列数（column-count）

column-count: [auto | <number>];

column-count用于定义多列布局的最大列数，即分栏的栏目数量，默认值auto。

列宽（column-width）

column-width用于定义单例的最小宽度，默认值auto表示根据column-count列数自动调整列宽。

column-width: [auto | <length>];

若没有指定column-count属性值，浏览器使用column-width将内容切分为合适列数。

多列（columns）

columns:<column-width> <column-count>;

例如：设置自动多列布局

.multi-column{
  columns: auto;
}

注意columns:auto实际上是columns: auto auto;的简写形式。

例如：设置多列布局列数为3，单列列宽自动计算。

.multi-column{
  columns:auto 3;
}

如何设置多列自适应，比如随着窗口尺寸缩小，从4列变为1列，随着窗口尺寸拉伸从1列变为4列呢？

首先外层宽度采用百分比弹性模式，其次column-width设置为固定值，不能设置为auto。设置为auto则会根据内容进行缩放。

列间距（column-gap）

column-gap用于定义列间距，默认normal表示两列之间的间隙宽度为1em。如果column-gap与column-width之和大于总宽度则无法显示column-count指定的列数，浏览器将自动调整列数和列宽。

column-gap: normal | <length>;

属性值	描述
normal	默认，指定列间距为常规间距即W3C的建议值1em。
length	设置列间距为指定长度

列规则（column-rule）

column-rule属性用于设置列宽度、样式和颜色。column-rule用于设置列的边框，类似于border属性，区别在于column-rule不会占用任何空间，因此不会导致列宽的变化。

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

column-rule的默认值为

column-rule: medium none black;

栏边框宽度（column-rule-width）

column-rule-width: <length> | thin | medium | thick;

取值	描述
length	宽度大小
thin	纤细
medium	默认中等
thick	较厚

间隔线（column-rule-style）

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

取值	描述
none	无间距线
hidden	隐藏边框
dotted	点状线
dashed	虚线
solid	实线
double	双线
groove	3D凹槽，取决于宽度和色值。
ridge	3D凸槽，取决于宽度和色值。
inset	3D凹边，取决于宽度和色值。
outset	3D凸边，取决于宽度和色值。

列高（column-fill）

CSS3规范中每列高度是均衡的，浏览器会自动调整每列中填充内容的大小来均分，使各列高度保持均衡一致

当需要设置单列的最大高度时，内容会从第一列开始依次填充，后续列也许会填不满，也许会溢出。因此，当对多列布局设置height或max-height属性后列会延伸至指定高度，无论内容多少够或不够。

column-fill: auto | balance;

属性值	描述
auto	默认，各列高度随内容自动调整。
balance	所有列高均设置为最大列高。

跨列（column-span）

column-span用于设置是否跨栏显示

column-span: none | all;

取值	描述
none	表示不跨列
all	表示跨越所有的列