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
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
関連項目
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リンク
- http://www.w3.org/TR/css3-multicol/#column-fill
- https://developer.mozilla.org/ja/docs/Web/CSS/column-fill
- http://caniuse.com/#feat=multicolumn
Copyright (C) 2015-2018 杜甫々
初版:2015年10月25日、最終更新:2018年1月7日
https://www.tohoho-web.com/css/prop/column-fill.htm