toc

Intro

css2.1中并没有专门的布局属性，因此css3种新增了多列自动布局的功能，Multi-colum Layout。

Columns属性——定义多列布局

columns是多列布局的基本属性,具体定义多列布局时的属性有：

• column-width属性可以定义每列的宽度，其值有 | auto。
• column-count属性定义了对象的列数，其值为 | auto 。
• column-gap属性定义了列与列之间的间距，其值有normal | 。
• column-rule属性定义了每列之间边框的属性，其用方式与border使用一致。
• column-span属性定义了元素的跨列显示或者单列显示，其值有 1 | all。
• column-fill属性定义了栏目的高度是否统一，其值有auto | balance，值为auto的时候各列的高度对着其内容的变化而自动变化，而值为balance时，各列的高度将会根据内容最多的那一列的高度进行统一。

其实列css为：

.box { column-count:3; -webkit-column-count:3; -moz-column-count:3; column-gap:30px; -webkit-column-gap:30px; -moz-column-gap:30px; column-rule: 2px dashed #666; -webkit-column-rule: 2px dashed #666; -moz-column-rule: 2px dashed #666; column-fill :balance; -webkit-column-fill:balance; -moz-column-fill :balance; padding: 10px 40px; } .box h3 { column-span:all; -webkit-column-span:all; -moz-column-span:all; text-align: center; margin-bottom: 20px; }

通过demo测试，ie10支持上述属性，但ie10以下的ie系列浏览器不支持column属性，Firefox不支持其中的column-span属性和column-fill属性，Chrome浏览器在资料书籍中是支持上述的全部属性，但诡异的是经过测试却得到了不同的结果。

break-before、break-after和break-inside是新增的用来控制分页打印的属性，使用方法与2.1规范化总的page-break-before、page-break-after和page-break-inside相同，其值有：

• auto：不强迫也不禁止在生成框之前（之后、之间）分页。
• always：强迫在生成框之前（之后、之间）分页。
• avoid：避免在生成框之前（之后、之间）分页。
• left：强迫在生成框之前（之后、之间）分一个或者两页，是下一页成为一个左页。
• right：强迫在生成框之前（之后、之间）分一个或者两页，是下一页成为一个右页。
• page：强迫在生成框之前（之后）分页。
• column:强迫在生成框之前（之后）分页列。
• avoid-page：避免在生成框之前（之后）分页。
• avoid-column：避免在生成框之前（之后）分页列。

具体的分页位置通常受到父元素的break-inside属性、前继元素break-after属性和后继元素的break-before属性的影响，如果这些属性不为auto，则always、left、和right属性值由于avoid。

具体浏览器中有私有属性-webkit-break-before，-webkit-break-after和-webkit-break-inside私有属性，其他浏览器貌似不支持？（待测）