列 | columns

该columns CSS属性是一个速记属性，允许同时设置column-width和column-count同时性。

/* Column width */
columns: 1em;

/* Column count */
columns: auto;
columns: 1;

/* Combination of column width and count */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: unset;

• column-width*auto

• column-count*auto

Applies to Block containers except table wrapper boxes   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• column-width*绝对长度，零或更大

• column-count*具体规定

Animation type as each of the properties of the shorthand:

• column-width*a长度

• column-count*整型

Canonical order per grammar  

语法

值

<'column-width'>是<length>给出列的最佳宽度的提示的值。实际的列宽可能会更宽（填充可用空间），或者更窄（仅当可用空间小于指定的列宽时）。长度必须严格肯定，否则声明无效。<'column-count'>严格正面<integer>描述元素内容将流入的理想列数。如果该column-width值也设置为非自动值，则仅表示允许的最大列数。

形式语法

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

例

HTML

<p class="content-box">
  This is some text split into three columns
  using the CSS property columns. The text is
  equally distributed over the columns.
</p>

CSS

.content-box {
  margin: 0;
  height: 90px;
  border: 3px solid black;
  columns: 3;
}

结果

规范

浏览器兼容性