概要
CSS の column-fill プロパティは、コンテンツがどのように列に分けられるのかを定義します。すべての列のコンテンツが同じ高さを取るようにバランスを取るか、または auto 指定して単にコンテンツが必要とする空間を使います。
| 初期値 | balance |
|---|
| 適用対象 | 多段要素 |
|---|
| 継承 | 不可 |
|---|
| メディア | visual。ただし連続メディアではオーバーフローした列に効果なし |
|---|
| 計算値 | 指定値 |
|---|
| アニメーションの可否 | 不可 |
|---|
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
|---|
構文
形式文法: auto | balance
column-fill: auto
column-fill: balance
column-fill: inherit
値
auto- 列が順に埋められることを示すキーワードです。
balance- 列間でコンテンツが等しく分けられることを示すキーワードです。
例
.content-box {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
height: 200px;
}
仕様
ブラウザ実装状況
| 機能 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
| 基本サポート |
? |
13.0 (13.0)-moz |
? |
? |
? |
| 機能 |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
| 基本サポート |
? |
13.0 (13.0)-moz |
? |
? |
? |