列填充 | column-fill
列填充
该column-fillCSS属性控制内容是如何分割成列。
/* Keyword values */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;
内容要么是平衡的，这意味着所有列中的内容将具有相同的高度，要么在使用auto时只占用内容需要的空间。
| Initial value | balance |
|---|---|
| 应用对象 | multicol elements |
| 是否可继承 | no |
| 媒体 | visual, but, in continuous media, has no effect in overflow columns |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | per grammar |
语法
下面列出的关键字值之一。
值
auto一个关键字，指示按顺序填充列。balance是一个关键字，指示内容在列之间均分。
形式语法
auto | balance | balance-all
实例
.content-box {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
height: 200px;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Multi-column Layout ModuleThe definition of 'column-fill' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 13.0 (13.0)-moz 52.0 (52.0)1 | ? | ? | ? |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | (Yes) | 13.0 (13.0)-moz 52.0 (52.0)1 | ? | ? | ? | (Yes) |
