CSS column-fill 属性

定義と使用方法

column-fill属性は、列をどのように埋め尽くすか（調整するかどうか）を定義します。

参照もしてください：

CSS3チュートリアル：CSS3 多列

HTML DOMリファレンスマニュアル：columnFill属性

例

列をどのように埋め尽くすかを指定します：

div
{
column-fill:auto;
}

CSS语法

column-fill: balance|auto;

属性値

値 説明
balance 列を調整します。ブラウザは列長の差を最小限に抑えるべきです。
auto 列に順序付けして埋め尽くし、各列の長さは異なります。

技術的詳細

デフォルト値： balance
継承性： no
バージョン： CSS3
JavaScript语法： object.style.columnFill="auto"

さらに例

Column-count
div要素内のテキストを3列に分けます。
Column-gap
div要素内のテキストを3列に分け、列間に30ピクセルの間隔を指定します。
Column-rule
列間の幅、スタイル、色を指定します。

ブラウザのサポート

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 52.0 10.0 37.0