column-fill

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
適用対象段組み要素
継承なし
計算値指定値
アニメーションの種類個別

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
column-fillChrome 完全対応 50Edge 完全対応 12Firefox 完全対応 52
完全対応 52
未対応 13 — 74
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 37Safari 完全対応 9
完全対応 9
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 50Chrome Android 完全対応 50Firefox Android 完全対応 52
完全対応 52
完全対応 14
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 37Safari iOS 完全対応 9
完全対応 9
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
balance-all
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。