column-fill プロパティ
column-fill プロパティは、columns プロパティによってカラムに分割される内容を均等分割して表示するか、左に寄せて表示するかを指定する CSS プロパティです。
カラムに分割表示は、columns、column-width、column-count プロパティで設定でき、column-fill プロパティはカラムに分割されたエレメントで機能します。
columns: 150px auto;
column-fill: auto;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
詳しくはExample
を参照してください
このプロパティの値は、balance (default) と auto です。none は内容が分割数に応じて均等割で表示されます。
auto は内容が左に寄せて表示され、高さに合わせて分割されます。高さを固定しなければ、内容は全て左に寄って表示されます。
上記の例は、高さを内容によって自動で変わるために内容が全て左に寄っています。高さを固定すればそれに合わせて表示されます。
ページ内 Index
構文(Syntax)
CSS
column-fill: balance | auto | initial | inherit ;
DOM ( JavaScript )
String = object.style.columnFill;
object.style.columnFill=" balance | auto | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| balance | 初期値（default値）、均等に分ける |
| auto | 内容を順番に埋めていく |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | balance |
| 継承（Inherited） | No |
| 変化（Animatable） | No |
Example
column-fill プロパティの例です。
column-fill プロパティは、columns プロパティによってカラムに分割される内容を均等分割して表示するか、左に寄せて表示するかを指定できます。
columns プロパティは、エレメントの内容全体を分割数で均等割され、左から順次表示されます。
以下の例では、column-fill プロパティ auto に指定して、高さを固定していないために内容が全て左に寄っています。
関連プロパティ
以下のような関連するプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| カラムに分割 | |
| columns | エレメントの分割数と幅の指定 |
| column-count | 分割数 |
| column-width | 分割する内容の幅 |
| 分割の調整 | |
| column-fill | 均等に割るか |
| column-span | 分割されたエレメントにまたがって表示 |
| カラム間のギャップと罫線 | |
| column-gap | 分割した内容の間 |
| column-rule | column-rule-width、column-rule-style、column-rule-colorプロパティの一括指定 |
| column-rule-color | カラム間に装飾する罫線の色 |
| column-rule-style | カラム間に装飾する罫線の種類 |
| column-rule-width | カラム間に装飾する罫線の幅 |