最終更新日

break-afterプロパティ

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

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

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

break-afterの使用例

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

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

break-before
break-inside
column-span
column-fill

CSS3での変更点
・break-afterは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
auto ブロックレベル要素 なし
説明
auto ブラウザの設定に従います。(初期値
column 特定の要素の後ろで、常に改段します。
avoid-column 特定の要素の後ろで、改段しないようにします。
サンプルコード
break-after: auto;
break-after: column;
break-after: avoid-column;
参考文献:CSS Multi-column Layout Module外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。