要素の表示レベルを変更したい（display）

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

displayプロパティを使って、HTMLタグの表示方法を設定できます。

1番目の引数（＝外部の表示型）はblockとinlineから選択します。 その要素の外部（＝親要素）に対する表示型を設定します。

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

注釈

CSS Display Module Level3では、displayプロパティは2値構文で記述することになっています。 後方互換性のため、これまでの記述も使うことができます。 いつまで使えるかは分かりません。

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

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

ブロックレベルにしたい（display: block flow）

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

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

インライン要素したい（display: inline flow）

h1 {
    display: inline flow;
}

h1タグをインラインレベルに変更し、子要素をフローコンテンツにしたサンプルです。 見出しの文字数に合わせた幅になります。