最終更新日 
break-beforeプロパティ
break-beforeは、段組み表示するときに、特定の要素の手前での改段方法を指定するプロパティです。
例えば、下記のように記述しておけば、段組表示の際は、必ず画像の手前で改段され、画像が次の段の一番上に配置されるようになります。
img {
display: block;
break-before: column;
}
キーワードとして、auto、always、avoid、left、right、page、column、avoid-page、avoid-columnの9つが規定されていますが、改段に関しては、「auto」「column」「avoid-column」の3つを使用します。
以下は、関連プロパティです。
CSS3での変更点
・break-beforeは、CSS3から新しく追加されたプロパティです。
| 初期値 | 適用先 | 継承 |
|---|---|---|
| auto | ブロックレベル要素 | なし |
| 値 | 説明 |
|---|---|
| auto | ブラウザの設定に従います。（初期値） |
| column | 特定の要素の手前で、常に改段します。 |
| avoid-column | 特定の要素の手前で、改段しないようにします。 |
サンプルコード
break-before: auto; break-before: column; break-before: avoid-column;
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。