CSS - column-fill

トップ > 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

リンク


Copyright (C) 2015 杜甫々
初版:2015年10月25日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/prop/column-fill.htm