Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

column-fill リダイレクト 1

概要

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 勧告候補  

ブラウザ実装状況

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

関連情報

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

 このページの貢献者: ethertank
 最終更新者: ethertank,