column-fill

概要

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;
}

仕様

仕様書 策定状況 コメント
CSS Multi-column Layout Module
The definition of 'column-fill' in that specification.
勧告候補  

ブラウザ実装状況

機能 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 ? ? ?

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: fscholz,