column-fill
column-fill
は CSS のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;
/* グローバル値 */
column-fill: inherit;
column-fill: initial;
column-fill: unset;
column-fill
プロパティは、以下に挙げたキーワード値のうちの1つで指定します。初期値は balance
で、コンテンツは段の間で均等になります。
値
公式定義
形式文法
例
テキストを段間で均等に分割
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 の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
仕様上の未解決の問題により、 column-fill
にはブラウザ-間の相互運用性の問題やバグがあることに注意してください。
特に、 column-fill: auto
を使用して連続的に列を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。