column-fill
CSS
property controls how an element's contents are balanced when broken into columns.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* Keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* Global values */ column-fill: inherit; column-fill: initial; column-fill: unset;
column-fill
property is specified as one of the keyword values listed below. The initial value is
balance
so the content will be balanced across the columns.
auto
Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.
balance
balance-all
| 初始值 |
balance
|
|---|---|
| 适用于 | multicol elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | balance | balance-all
<p class="fill-auto"> This paragraph fills columns one at a time. Since all of the text can fit in the first column, the others are empty. </p> <p class="fill-balance"> This paragraph attempts to balance the amount of content in each column. </p>
p {
height: 7em;
background: #ff9;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Multi-column Layout Module
The definition of 'column-fill' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
column-fill
|
Chrome 完整支持 50 | Edge 完整支持 12 |
Firefox
完整支持
52
|
IE 完整支持 10 | Opera 完整支持 37 | Safari 完整支持 9 | WebView Android 完整支持 50 | Chrome Android 完整支持 50 |
Firefox Android
完整支持
52
|
Opera Android 完整支持 37 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 5.0 |
balance-all
Experimental
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
要求使用供应商前缀或不同名称。
Note that there are some interoperability issues and bugs with
column-fill
across browsers, due to unresolved issues in the specification.
In particular, when using
column-fill: auto
to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g., height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.