レイアウトプロパティ:display

display

要素の画面上の表示方法を制御します。これにより、要素がブロック要素、インライン要素、フレックスボックス、グリッドなどとして表示されるかどうかを決定します。

display プロパティの値と影響範囲

display プロパティの値は、要素自体に影響を与えるものと、小要素に影響を与えるものに分けることができます。

自分自身の要素のみに影響を与える値

• block 要素をブロックレベル要素として表示します。ブロックレベル要素は、常に新しい行から始まり、幅は親要素に対して 100%になります。
• inline 要素をインライン要素として表示します。インライン要素は、他の要素と同じ行に配置され、幅は内容に応じて変わります。
• inline-block 要素をインラインブロック要素として表示します。インライン要素のように同じ行に配置されますが、ブロック要素のように幅や高さを指定できます。
• none 表示しません。要素は DOM（HTML のドキュメントオブジェクトモデル）に存在しますが、レンダリングされず、レイアウトにも影響を与えません。

小要素に影響を与える値

• flex 要素をフレックスコンテナとして表示します。フレックスボックスレイアウトを使用して、子要素を一次元の配列として配置とサイズを制御します。自身はブロックレベル要素となります。
• grid 要素をグリッドコンテナとして表示します。グリッドレイアウトを使用して、子要素を二次元の配列として配置とサイズを制御します。自身はブロックレベル要素となります。
• inline-flex 子要素を一次元の配列として配置とサイズを制御します。自身はインライン要素となります。ナビゲーションバーやボタンのグループなど、インライン要素として表示する際に使われます。
• inline-grid 子要素を二次元の配列として配置とサイズを制御します。自身はインライン要素となります。