displayプロパティの新しい書き方について学んだ。
displayプロパティとは
displayプロパティを直接指定する要素自身やその子孫要素のレイアウトを定義するために指定する。
以下、displayプロパティを直接指定する要素自身のことを「主ボックス（principal box）」と記述。
新しい書き方
displayプロパティの新しい書き方では、スペース区切りで以下二つの値を指定する↓
display = <display-outside> <display-inside>はじめに外部の値を、続いて内部の値を指定する。
display-outside
主ボックスがフローレイアウトにおいてどのようにレイアウトされるかを指定する。
フローレイアウトとは、CSS のページレイアウト技術の一つで、ページレイアウトの制御を何もしない場合にブラウザーがデフォルトでWebページをレイアウトする方法。
ページレイアウトの制御を何もしないとは、レイアウトに変更を加えるプロパティを指定しない場合のこと。レイアウトに変更を加えるプロパティとは、positionやfloatなど。
フローレイアウトでは、書字方向や、上から下のようなコンテンツの流れに沿って要素を配置する。
指定できる値は、以下の3つ↓
- inline
- block
- run-in（最新のブラウザではサポートされていないため無視）
inline
書字方向に従って配置される。日本語や英語の場合は左から右、アラビア語やヘブライ語の場合は右から左に配置される。領域に余裕がある場合、次の要素も同じ行に配置される。
block
上から下に配置される。
display-inside
主ボックスの整形文脈を定義し、要素の内容物（直下のテキストや子孫要素）がどのようにレイアウトされるかを指定する。
整形文脈とは、HTML要素がどのようにレイアウトされるかを定義するための規則のこと。
以下の値などが指定できる（よく使いそうなキーワードだけ抜粋）↓
- flow
- flow-root
- flex
- grid
flow
display-outsideの値がinlineの場合、内容物は書字方向に従って配置される。また、blockの場合は上から下に配置される。
この値は整形文脈を定義しているのかよくわかってない。
サンプル：display:inline flow;↓
See the Pen Untitled by ユイト (@mikiprogram) on CodePen.
サンプル：display:block flow;↓
See the Pen Untitled by ユイト (@mikiprogram) on CodePen.
flow-root
flowと同じでフローレイアウトに沿って内容物が配置される。
違うところは、常に新しいブロック整形文脈を生成する。これが生成されると、floatプロパティの回り込みを解除したり、親と子孫要素間のマージン相殺を無くすことができる。
古い書き方で指定した場合
display:inline;やdisplay:flex;のように値を省略して書いた場合はどうなるのか？
まず、display-outsideの値を省略した場合、outsideの値はblockになる。
また、display-insideの値を省略した場合、insideの値はflowになる。
display:inline;→display:inline flow;となり、display:flex;→display:block flex;になる。
つまり、古い書き方で書いても全然問題ないということ。
新しい書き方と古い書き方との対応表は以下を参照↓
新しい書き方を使うメリットは？
今のところなし。強いて言えば主ボックスと子孫要素への影響が分かりやすくなること。
参考サイト
