多列属性

columns

columns：<' column-width '> || <' column-count '>

默认值：看每个独立属性

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

column-width

定义多列中每一列的宽度

column-width：length | auto

默认值：auto

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

length：
用长度值来定义列宽。不允许负值
auto：
根据 <' column-count '> 自定分配宽度

column-count

定义多列中，分成多少列

column-count：integer | auto

默认值：auto

适用于：除table外的非替换块级元素, table cells, inline-block元素

继承性：无

length：
用整数值来定义列数。不允许负值
auto：
根据 <' column-width '> 自定分配列数

列数及列宽固定:

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

列宽固定，根据容器宽度液态分布列数:

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

列数固定，根据容器宽度液态分布列宽:

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

column-gap

列与列直接的间隙宽度

column-gap：length | normal

默认值：normal

适用于：定义了多列的元素

继承性：无

length：
用长度值来定义列与列之间的间隙。不允许负值
normal：
与 font-size 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

间隙30px

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

column-rule

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>

默认值：看每个独立属性

适用于：定义了多列的元素

继承性：无

column-rule-width

定义列与列之间边框的宽度

column-rule-width：length | thin | medium | thick

默认值：medium

适用于：定义了多列的元素

继承性：无

length：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。

column-rule-style

定义边框的样式，和border-style类似

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

默认值：none

适用于：定义了多列的元素

继承性：无

none：
无轮廓。<' column-rule-color '> 与<' column-rule-width '> 将被忽略
hidden：
隐藏边框。
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的 <' column-rule-width '> 值
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。

column-rule-color

边框的颜色

column-rule-color：<color>

默认值：采用文本颜色

适用于：定义了多列的元素

继承性：无

column-rule-width:10px; column-rule-style: solid; column-rule-color:red;

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

column-span

定义一个横穿所有列的标签

column-span：none | all

默认值：none

适用于：除浮动和绝对定位之外的块级元素

继承性：无

none：
不跨列
all：
横跨所有列

column-span:all;

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

column-span:all;

On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.

column-fill

统一列高，但是浏览器表现不一致

column-fill：auto | balance

默认值：auto

适用于：定义了多列的元素

继承性：无

auto：
列高度自适应内容
balance：
所有列的高度以其中最高的一列统一

column-break-before

决定一列的前面是否新起一列

column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

auto：
既不强迫也不禁止在元素之前断行并产生新列
always：
总是在元素之前断行并产生新列
avoid：
避免在元素之前断行并产生新列

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

不管上一列有没有填满，我都另起一列

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

column-break-after

决定后面是否新起一列

column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

管本列有没有填满，后面新建一列

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

column-break-inside

定义自己本身是否可以进行多列分布

column-break-inside：auto | avoid | avoid-page | avoid-column

默认值：auto

适用于：块级元素

继承性：无

auto：
既不强迫也不禁止在元素内部断行并产生新列
avoid：
避免在元素内部断行并产生新列

第二列强制断行，所以新起了一列,并没有跟在第一列后面

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.

This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.