CSScolumn-fill プロパティは、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

構文

/* キーワード値 */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* グローバル値 */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

column-fill プロパティは、以下に挙げた値のうち1~3つを順不同で指定します。

auto
段は順に埋められます。コンテンツは必要な分だけ領域を占有します。
balance
コンテンツは各段に均等に分割されます。ページメディアでは、最後のページのみが均等に分割されます。
balance-all
コンテンツは格段に均等に分割されます。ページメディアでは、すべてのページが均等に分割されます。

形式文法

auto | balance | balance-all

HTML

<p class="content-box">
  This is a bunch of text split into multiple
  columns. The CSS `column-fill` property is
  used to spread the contents evenly across
  all the columns.
</p>

CSS

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
}

結果

仕様書

仕様書 策定状況 コメント
CSS Multi-column Layout Module
column-fill の定義
草案 初回定義。

初期値balance
適用対象段組み要素
継承なし
メディアvisual。ただし連続メディアではオーバーフローした列に効果なし
計算値指定値
アニメーションの種類個別
正規順序構文通り

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 52
完全対応 52
完全対応 13
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 52
完全対応 52
完全対応 14
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

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