例

段の揃え方を指定します：

div {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}

定義と用法

column-fill プロパティは、各段の高さを揃えるかどうかを指定します。

デフォルト値：	balance
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.columnFill="auto" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-moz- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

CSS 構文

プロパティの値

プロパティ
column-fill	未サポート	未サポート	13.0 -moz-	未サポート	未サポート

値	説明
balance	デフォルト値。段の高さを均一にします。ブラウザは、段の高さのばらつきを最小限にします
auto	段は順番に埋められ、段の長さは各々異ります
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照

段数

<div> 要素内のテキストを 3 段に分割します：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Try it Yourself ❯

段間の間隔

<div> 要素内のテキストを 3 段に分割し、段間に 40 ピクセルの間隔を指定します。

Try it Yourself ❯

段間の罫線

段間の罫線の幅、スタイル及び色を指定します。

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

Try it Yourself ❯

CSS3 column-fill プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

その他の例

段数

段間の間隔

段間の罫線

関連ページ