CSS3新特性-多栏布局

为了实现类似报纸，杂志的多列排版的布局，CSS3新增了一个多列布局模块（css multi column layout module）。主要应用在文本的多列布局方面。

语法：

colums:<column-width> || <column-count>

譬如三栏布局，每栏内容宽度为150px

columns: 150px 3;

column-width属性

column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。

column-width: auto | <length>

1. 如果设置为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定
2. 也可以设置固定值来设置列宽，只能为正值

考虑浏览器兼容性：

-webkit-column-width
-moz-column-width
-o-column-width
-ms-column-width

column-count属性

column-count属性主要用来给元素指定想要的列数和容许的最大列数

column-count:auto || <integer>

1. auto就是默认值，表示元素只有一列
2. <integer>为正整数值

column-gap属性

column-gap属性用来设置列与列之间的间距：

column-gap:normal || <length>

1. normal就是默认值 1em，单位是px的也就是font-size的值
2. <length>设置列与列之间的距离，可以是任何正数的px或em的值

column-rule属性

column-rule属性主要用来定义列与列之间的边框宽度、边框样式和边框颜色。类似border，但它不占据任何空间位置。

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

1. column-rule-width：定义列边框的宽度，默认值medium，说明是可以接受关键词的值：medium、thick、thin。接受任何浮点数但就不能是负数
2. column-rule-style：定义列边框样式，默认none，可接受的值有关键词none，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset
3. column-rule-color：定义列边框颜色

column-span属性

column-span属性定义一个分列元素中的子元素能跨列多少。该属性用于当需要一段内容或标题不进行分列，也就是横跨所有列。

column-span:none | all

 

关注我吧

关注「前端一起学」公众号 ，看着项目进阶学习，让我们一起学前端，一起进步。