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

仕様

ブラウザ実装状況

関連情報

• column-width 、 column-count 、 column-gap 、 column-rule 、 column-rule-width 、 column-rule-style 、 column-rule-color 、 column-span 、 column-fill 、 columns