表示スタイルしたい（`display`）

display: 外部の表示型 内部の表示型;

displayプロパティで要素の表示スタイル（block / inline）を変更できます。

displayプロパティは2値構文になっていて、 1番目の引数は「外部の表示型」でblock、inlineから選択します。その要素の親要素に対する表示スタイルを設定します。

2番目の引数は「内部の表示型」でflow、flow-root、flex、gridから選択します。その要素の子要素に対する表示型を設定します。

これまで（1値型）とこれから（2値型）

display: block;       /* これまでの書き方 */
display: block flow;  /* 現在の書き方 */

display: inline-block;
display: inline flow-root;

displayプロパティはこれまで1値型構文でした。後方互換性のため、従来の記述も使うことができます。ただし、いつまで使えるかは分からないので、これからウェブサイトを作る場合は、 2値構文で定義するとよいです。

注釈

code {
    display: block flex;
    width: 100vw;
    height: 100vw;
}

デフォルトでインライン要素であるcodeタグをブロック要素に変更し、子要素をフレックスにしたサンプルです。ブロック表示要素はwidthやheightを設定できるようになります。また、要素の前後で改行されます。

h1 {
    display: inline flow;
}

デフォルトでブロック要素であるh1タグをインライン要素に変更し、子要素をフローコンテンツにしたサンプルです。