English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-fill CSS属性は、多列要素内の列の長さがどのようにコンテンツストリームに影響されるかを指定します。多列レイアウト内のコンテンツはバランスが取られており、これはすべての列のコンテンツが同じ高さを持つことを意味します。または、auto値を使用すると、内容の需要に応じて空間を占めるようにします。
以下の表は、この属性の使用方法とバージョンヒストリー、およびJavaScriptスクリプト内でのこの属性の使用文法を示しています。
| デフォルト値： | balance |
|---|---|
| 適用： | 多列要素 |
| 継承： | ありません |
| アニメーション可能： | いいえ アニメーション属性。 |
| バージョン： | CSS3の新機能 |
| JavaScript文法： | object.style.columnFill="auto" |
この属性の文法は以下の通りです：
column-fill: auto | balance | initial | inherit
以下の例では、column-fill属性。
p {
-moz-column-fill: auto; /* Firefox */
column-fill: auto;
}テストをしてみる‹/›以下の表はこの属性の値を説明しています。
| 値 | 説明 |
|---|---|
| auto | 各列を順序に埋め尽くし、他の列の属性値に基づいて列の長さが異なるようにします。 |
| balance | 各列を順序に埋め尽くし、他の列の属性値に基づいて可能な限り列の高さを均等にします。 |
| initial | この属性をデフォルト値に設定します。 |
| inherit | 指定された場合、関連する要素は親要素のcolumn-fillの属性値。 |
column-fill属性のブラウザの互換性について、以下の表の数字はこの属性をサポートするブラウザの最低バージョンを示します；現在、fill属性をサポートするのはFirefoxブラウザのみです。
|
以下のチュートリアルを参照してください：CSS3多列レイアウト。
関連属性：column-width、column-gap、column-rule、column-rule-width、column-rule-style、column-rule-color、column-span、column-count、columns。