浅谈CSS3新特性之多列布局模块

程序员文章站 2022-03-20 22:33:47

...

CSS3新增了一个多列布局模块（Multi-column Layout Module），主要应用在文本的多列布局方面。

Multi-column可分为：

①　列数和列宽：column-count、column-width、columns

column-count：值为正整数，不带单位，表示Multi-column分列的列数，默认为auto（列数根据column-width等其他参数来定）。IE不支持该属性，在Firefox和Webkit下需要加上前缀-moz和-webkit。

column-width：表示Multi-column的列宽，其单位是px或em，但不能是负数，默认为auto（列数根据column-count等其他参数来定，但column-count此时不能为auto）。IE不支持该属性，Opera11+支持，在Firefox和Webkit下需要加上前缀-moz和-webkit。

columns：把column-width和column-count两个属性合并在一起使用。这种简写模式只在Webkit和Opera下支持，Firefox不支持。

若同时设置了column-width和column-gap，则实际列宽会根据column-gap调整，不一定等于设置的column-width值。

当设置的列宽大于元素容器的宽度时，并不会让元素内容按列宽进行布局而撑破容器，只会把列宽降到与容器宽度相等。

为了分列能适应各种屏幕大小，最好设置一个确切的列宽或列数，并相应指定相关属性，如元素的width、column-gap、column-rule-width等，如果column-gap、column-rule-width使用默认值，在多列设计中最好明确写定好、column-width和column-count的值。

②　列的间距和分列样式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule

跨列布局中，column-gap相当于两列之间的空白，类似于margin；而column-rule相当于一条分隔线，类似于border。column-gap和olumn-rule是有高度的，其高度和列等高，最大区别是column-gap没有任何样式，且在列与列之间占有一定的空间，而column-rule有一定的样式，类似于border有样式。

column-gap单位是px或em，但不能是负数，默认值为normal（1em）。IE不支持该属性，Opera11+支持，在Firefox和Webkit下需要加上前缀-moz和-webkit。

虽然column-gap可以用来改变相邻列之间的距离，但在多列元素同时设置了column-width时，column-gap与column-width之和大于多列元素总宽度时，会导至列被撑破，并以第一列显示，此时的列宽自动调节到元素的总宽度。

column-rule同样具有border类似的属性：宽度column-rule-width（默认值为medium），样式column-rule-style（默认值为none），颜色column-rule-color，不同的是border占有一定的空间位置，而column-rule不占有任何的空间位置，column-rule-width增大并不会影响列的布局，只会将其往元素两边扩展，直到元素边缘为止。

③　列的分栏符：break-before、break-after、break-inside

目前支持的浏览器很少，暂不介绍。

④　填充列：column-fill

目前支持的浏览器很少，暂不介绍。

⑤　跨越列：column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少列。有时需要某个内容或某个标题不进行任何分列，需要其横跨所有列，此时就需要用到column-span属性。默认值为none，表示不跨越任何列；all表示跨越所有列。目前支持的浏览器只有Safari、Chrome、Opera11+，在Webkit下需要加上前缀-webkit。

.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}