column-fill « webmas.jp

column-fill

column-fill プロパティは段組みをどのように揃えるかを指定します。

※ 一部 W3C 仕様書直訳

値	詳細
auto	段組みの内容が前詰めで順に埋められます。
balance	各段に均等に分割されます。フラグメント化されたコンテキストでは、最後のフラグメントのみがバランスが取られます。
balance-all	各段に均等に分割されます。フラグメント化されたコンテキストでは、すべてのフラグメントのバランスがとられます。 ※ 対応ブラウザなし

balance が指定されている場合

<p class="box1">雨ニモマケズ<br />
風ニモマケズ<br />
雪ニモ夏ノ暑サニモマケヌ<br />
丈夫ナカラダヲモチ<br />
慾ハナク<br />
決シテ瞋ラズ<br />
イツモシヅカニワラッテヰル
</p>

p.box1 {
	height: 500px;
	column-count: 3;
	column-rule: 1px dotted black;
	column-fill: balance;
}

auto が指定されている場合

<p class="box1">雨ニモマケズ<br />
風ニモマケズ<br />
雪ニモ夏ノ暑サニモマケヌ<br />
丈夫ナカラダヲモチ<br />
慾ハナク<br />
決シテ瞋ラズ<br />
イツモシヅカニワラッテヰル
</p>

p.box1 {
	height: 500px;
	column-count: 3;
	column-rule: 1px dotted black;
	column-fill: auto;
}