CSS - column-fill

概要

属性名 column-fill
値 auto | balance | balance-all
初期値balance
適用可能要素マルチカラム要素
継承継承しない
メディアvisual

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3未13(-moz)4(-webkit)
50		??

説明

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

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

使用例

CSS
.multicol-auto {
  border: 1px solid gray;
  columns: 3;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
  height: 90px;
}
.multicol-balance {
  border: 1px solid gray;
  columns: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  height: 90px;
}
HTML
<h3>auto</h3>
<div class="multicol-auto">
いろはにほへとちりぬるを...
</div>

<h3>balance</h3>
<div class="multicol-balance">
いろはにほへとちりぬるを...
</div>
表示
auto
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
balance
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

関連項目

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-2018 杜甫々
初版：2015年10月25日、最終更新：2018年1月7日
https://www.tohoho-web.com/css/prop/column-fill.htm