CSS3: column-fill プロパティ - 段ごとの高さ（長さ）を揃えるかどうか

■ 概要

項　　目説　　明
記述形式 セレクタ {column-fill: 値 }
値 の形式 balance，auto
初 期 値 balance
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+
適用可能な要素 複数段になっている要素
継　　承 しない

■ 解説

column-fill プロパティ は，段組の 段ごとの高さ（長さ）を揃えるかどうか を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
balance 可能な限り調整して高さ（長さ）を揃えます。　（初期値）
auto 前詰めで収めていきます。
備　　考
  1. 連続なメディアでは，このプロパティは，高さ（長さ）が指定されている場合にのみ有効です。 　それ以外の場合では，自動的に調整して段の高さが揃えられます。
  2. 連続なメディアで，内容が段幅をはみ出した段に対しては，このプロパティは無効です。
  3. ページメディアでは，このプロパティは最終ページの段組要素でのみ有効です。

■ 使用例（ column-count プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
   <!--
      div.mc30 {
         width: 40em;
         height: 9.2em;
         column-count: 3;
         column-fill: auto;
         border: solid blue 3px;
      }
      div.mc31 {
         width: 40em;
         height: 9.2em;
         column-count: 3;
         column-fill: balance;
         border: solid blue 3px;
      }
   -->
</style>
HTML
<body> ～ </body>		 
<div>column-fill: auto; の場合</div>
<div class="mc30">
   <p>他のプロパティの値に基づき段数を決めます。　（初期値）
      <br>たとえば，column-width が auto 以外の値の場合には，
      それに基づいて段数を決定します。</p>
   <p>段組の段数 を 1 以上の整数で指定します。
      　もし，column-count と column-width がともに auto 以外の値の場合，
      ここで指定した段数は 上限値 の意味になり，実際の段数は
      column-width により決まる場合もあります。</p>
</div>
<br>
<div>column-fill: balance; の場合</div>
<div class="mc31">
   <p>他のプロパティの値に基づき段数を決めます。　（初期値）
      <br>たとえば，column-width が auto 以外の値の場合には，
      それに基づいて段数を決定します。</p>
   <p>段組の段数 を 1 以上の整数で指定します。
      　もし，column-count と column-width がともに auto 以外の値の場合，
      ここで指定した段数は 上限値 の意味になり，実際の段数は
      column-width により決まる場合もあります。</p>
</div>

ブラウザー 表示例
column-fill: auto; の場合

他のプロパティの値に基づき段数を決めます。　（初期値）
たとえば，column-width が auto 以外の値の場合には， それに基づいて段数を決定します。

段組の段数 を 1 以上の整数で指定します。 　もし，column-count と column-width がともに auto 以外の値の場合， ここで指定した段数は 上限値 の意味になり，実際の段数は column-width により決まる場合もあります。


column-fill: balance; の場合

他のプロパティの値に基づき段数を決めます。　（初期値）
たとえば，column-width が auto 以外の値の場合には， それに基づいて段数を決定します。

段組の段数 を 1 以上の整数で指定します。 　もし，column-count と column-width がともに auto 以外の値の場合， ここで指定した段数は 上限値 の意味になり，実際の段数は column-width により決まる場合もあります。

■ 備考

【参考ページ】