最終更新日

break-beforeプロパティ

break-beforeは、段組み表示するときに、特定の要素の手前での改段方法を指定するプロパティです。

例えば、下記のように記述しておけば、段組表示の際は、必ず画像の手前で改段され、画像が次の段の一番上に配置されるようになります。

img {
	display: block;
	break-before: column;
}

break-beforeの使用例

キーワードとして、auto、always、avoid、left、right、page、column、avoid-page、avoid-columnの9つが規定されていますが、改段に関しては、「auto」「column」「avoid-column」の3つを使用します。

以下は、関連プロパティです。

break-after
break-inside
column-span
column-fill

CSS3での変更点
・break-beforeは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
auto ブロックレベル要素 なし
説明
auto ブラウザの設定に従います。(初期値
column 特定の要素の手前で、常に改段します。
avoid-column 特定の要素の手前で、改段しないようにします。
サンプルコード
break-before: auto;
break-before: column;
break-before: avoid-column;
参考文献:CSS Multi-column Layout Module外部リンク
HOME