column-fill
column-fill
は CSS のプロパティで、段組みレイアウトで要素の内容物が複数の段に分割されるとき、どのようにバランスを取るのかを制御します。
試してみましょう
構文
/* キーワード値 */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;
/* グローバル値 */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: unset;
column-fill
プロパティは、以下に挙げたキーワード値のうちの 1 つで指定します。初期値は balance
で、コンテンツは段の間で均等になります。
値
公式定義
形式文法
例
段の内容を均等にする
HTML
<p class="fill-auto">
この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。
</p>
<p class="fill-balance">
この段落では、それぞれの段で内容量のバランスを取ろうとします。
</p>
CSS
p {
height: 7em;
background: #ff9;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
結果
仕様書
Specification |
---|
CSS Multi-column Layout Module Level 1 # cf |
ブラウザーの互換性
BCD tables only load in the browser
警告: 仕様上の未解決の問題により、 column-fill
にはブラウザ-間の相互運用性の問題やバグがあることに注意してください。
特に、 column-fill: auto
を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。