CSS - column-fill

属性名	column-fill
値	auto \| balance \| balance-all
初期値	balance
適用可能要素	マルチカラム要素
継承	継承しない
メディア	Visual
サポート	C3 / e10 / Fx13(-moz) / Ch?(-webkit) / Op11.1 / Sa?(-webkit)

マルチカラムの各カラムの行数に関するアルゴリズムを指定します。この属性は、マルチカラム要素に高さが指定されていたり、画像などを表示することで最低限の高さを持っている場合に有効です。

値	説明
balance	すべてのカラムが極力同じ行数になるように調整(平準化)します。ページ媒体では最後のページのみが平準化されます。
balance-all	すべてのカラムが極力同じ行数になるように調整(平準化)します。ページ媒体ではすべてのページが平準化されます。
auto	先頭のカラムから高さを満たすまで埋めていきます。

CSS

.multicol {
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
  height: 90px;
}

HTML

<div class="multicol">
いろはにほへとちりぬるを...
</div>

表示

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすんいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすんいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすんいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

colums, colum-count, colum-width, colum-gap, colum-rule, colum-rule-color, colum-rule-style, colum-rule-width, break-before, break-after, break-inside, colum-span

CSS - column-fill

概要

説明

使用例

関連項目

リンク