CSS 多列布局

CSS多列布局（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

基本示例

在下列示例中，column-count属性应用于带有容器类的元素。因为column-count的值为3，所以内容排成等宽的3列。

Relationship to Fragmentation

Multiple-column Layout is closely related to Paged Media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the CSS Fragmentation specification are required in order to control how content breaks between columns. 

参考

多列布局属性

有关的CSS碎片化属性

指南

多列的基本概念

多列布局的概述

设置列的样式

如何使用列的分隔线，以及设置列间距。

Spanning and Balancing

How to make elements span across all columns and controlling the way columns are filled.

Handling Overflow in Multicol

What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

Content Breaks in Multicol

Introduction to the Fragmentation specification and how to control where column content breaks.

规范