column-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

column-width CSS 属性用于设置多列布局中的理想列宽。容器会被尽可能多的列填充，其中，列的宽度不小于 column-width 值。如果容器的宽度比指定的值小，那么单列的宽度比会声明的列宽小。

尝试一下

此属性可以创建响应式设计，帮助你适配不同的屏幕尺寸。特别是在存在 column-count 属性（具有高优先级）的情况下，为了得到精确的列宽，你必须指定所有相关的长度。在水平文本中，需要指定 width、column-width、column-gap 和 column-rule-width。

语法

css
/* 关键字值 */
column-width: auto;

/* <length> 值 */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

/* 全局值 */
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: revert-layer;
column-width: unset;

column-width 属性可以指定为下面列出的值。

值

<length>

表示最合适的列宽。实际的列宽可能与指定值存在很大差别：它可能会更宽以填充可用空间，当可用空间太小时则会变窄。该值必须严格为正，否则声明无效。百分比值也无效。

auto

列的宽度由其它 CSS 属性（例如 column-count）决定。

形式定义

初始值auto
适用元素Block containers except table wrapper boxes
是否是继承属性否
计算值绝对长度，零或更大
动画类型a length

形式语法

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

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

实例

使用像素设置列宽

HTML

html
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>

CSS

css
.content-box {
  column-width: 100px;
}

结果

规范

Specification
CSS Box Sizing Module Level 3
# column-sizing
CSS Multi-column Layout Module Level 1
# cw

浏览器兼容性

BCD tables only load in the browser

参见