CSS - column-fill

概要

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

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
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

リンク

初版：2015年10月25日、最終更新：2018年1月7日

https://www.tohoho-web.com/css/prop/column-fill.htm

CSS - column-fill

概要

サポート (説明)

説明

使用例

関連項目

リンク