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-allChrome 未対応 なしEdge 未対応 12 — 79Firefox 完全対応 13IE 完全対応 10Opera 未対応 なしSafari 完全対応 8WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 14Opera Android 未対応 なしSafari iOS 完全対応 8Samsung Internet Android 未対応 なし

凡例

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