displayの2値構文とは、displayプロパティに指定する値が2つあることを指す。
例えば、display: inline flexのように、displayプロパティにinlineとflexの2つの値を指定している場合、2値構文と呼ばる。
これは、diaplay: inline-flexと同じ意味となる。
2値構文の使い方
2値構文では、指定する値を外側と内側に分けて指定する。
display: 外側の値 内側の値;外側の値
外側の値は、displayプロパティの値として使えるのはblock及びinlineのみである。これらは、要素をブロックとして扱うかインラインとして扱うかを指定する値である。
内側の値
内側の値にはその要素がどのような振る舞いをするかを指定する値を指定する。例えば、flexやgrid、tableなどのレイアウトを制御する値を指定することができる。
| 1値構文 | 2値構文 | 意味 |
| inline | inline flow | インライン |
| block | block flow | 回り込みを解除できないブロック |
| flow-root | block flow-root | 回り込みを解除できるブロック |
| inline-block | inline flow-root | インラインブロック |
| flex | block flex | フレックス |
| grid | block grid | グリッド |
| inline-block | inline flow-root | インラインブロック |
| inline-flex | inline flex | インラインフレックス |
| inline-grid | inline grid | インライングリッド |
flowとflow-root
flowやflow-rootはBFC（ブロック整形コンテキスト）という、要素のレイアウトを制御する仕組みを作る値で、内部でfloatが使われている場合それをどのように扱うかを指定することができる。
例えば、flow-rootを指定すると、floatの回り込みを親要素内で解除することができる。
