レイアウト
break-before
break-before は、段組みや印刷のページで、要素の直前に切れ目を入れるかを指定します。column にすると、その要素から次の段が始まります。
構文
auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | regionプレビュー
The fox.茶色の狐が跳ぶ。Over the lazy dog.
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
column-fill: auto;
}
.box > :nth-child(2) {
break-before: column;
}コントロール
break-beforecolumn
The fox.茶色の狐が跳ぶ。Over the lazy dog.
解説
値の意味
auto：初期値です。収まらなくなったときだけ切れ目が入ります。column：直前で必ず段を改めます。avoid：直前では、段もページもなるべく改めないようにします。avoid-column：直前では段をなるべく改めないようにします。page/avoid-page：印刷するときに、直前で必ずページを改めます／なるべく改めないようにします。left/right：印刷するときにページを改め、次が左のページ／右のページになるようにします。そのために白紙のページが 1 枚入ることがあります。recto/verso：本の表のページ／裏のページから始めます。左から右へめくる本では、right/leftと同じです。always：段組みの中なら段を、そうでなければページを改めます。効くのは Firefox で印刷するときだけです。
プレビューでは、2 段組みの箱の中の水色のかたまり（2 番目の子）に書いています。箱には column-fill: auto も書いて、1 段目から順に詰めています。auto ではすべて 1 段目に収まり、column ではかたまりが 2 段目の頭から始まります。
よく使う場面
印刷用のスタイルで、章の見出しに break-before: page を書いて、章ごとに新しいページから始めるときによく使います。
気をつけること
- 段組みの中で
column・avoid・avoid-columnが効くのは Chrome・Edge だけです。Firefox・Safari では段は改まりません。 - インラインの要素（
spanやdisplay: inline-blockの要素）には効きません。display: blockなどのブロックの要素に書きます。 - 前の要素の
break-afterと、この要素のbreak-beforeは同じ切れ目にかかります。片方がcolumnやpageのように切れ目を入れる値なら、もう片方がavoidでも切れ目が入ります。 - 古い
page-break-beforeは、今もbreak-beforeの別名として使えます（alwaysはpageと同じ意味になります）。 all・region・avoid-regionは対応しているブラウザが無いので、コントロールには出していません。