列

**columns** CSS 速记属性用于设置在绘制元素内容时使用的列数，以及这些列的宽度。

试试看

组成属性

此属性是以下 CSS 属性的速记。

语法

css
/* Column width */
columns: 18em;

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

/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* Global values */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

columns 属性可以指定为以下列出的值中的一个或两个，顺序任意。

Values

<'column-width'>

理想的列宽，定义为 <length> 或关键字 auto。实际宽度可能会更宽或更窄以适应可用空间。查看 column-width.

<'column-count'>

元素内容应流入的理想列数，定义为 <integer> 或关键字 auto。如果此值和列宽都不为 auto，则它仅表示允许的最大列数。查看 column-count.

正式定义

Initial value与速记属性中的每个属性相同
Applies to块级容器，除了表格包装盒
Inherited否
Computed value与速记属性中的每个属性相同
Animation type与速记属性中的每个属性相同

正式语法

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

<column-width> = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<column-count> = 
  auto             |
  <integer [1,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

例子

设置三列相等

HTML

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

CSS

css
.content-box {
  columns: 3 auto;
}

Result

规范

Specification
CSS 多列布局模块级别 1
# 列

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见