columns

CSS 属性 columns 用来设置元素的列宽和列数。

尝试一下

它是一个简写属性，可在单个方便的声明中设置 column-width 和 column-count 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

语法

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: unset;

columns 属性可以按任何顺序指定为下面列出的一个或两个值。

取值

<'column-width'>

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

<'column-count'>

元素内容应分成的理想列数，定义为 <integer> 或 auto 关键字。如果此值和列的宽度都不是 auto ，则它仅指示允许的最大列数。请参阅 column-count 。

正式语法

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 Multi-column Layout Module Level 1
# columns
初始值该简写所对应的每个属性：
适用元素Block containers except table wrapper boxes
是否是继承属性否
计算值该简写所对应的每个属性：
动画类型该简写所对应的每个属性：

浏览器兼容性

BCD tables only load in the browser