【CSS】display

displayについて

display は CSS のプロパティで、要素の表示方法を指定するために使用されます。要素がどのようにレンダリングされるかを制御するために、様々な値を指定することができます。
簡単に言うと、設定する要素によって、表示形式が変えられる設定になります。
細かい種類はもう少しありますが、これだけ分かればとりあえず大丈夫だと思います。
関係性としては、blockとinlineが対となり、中間値がinline-block、あとは独自の動作となります。

display: block;

以下の特徴があります。

縦に要素が並ぶ
幅と高さを指定できる
余白を調整できる
align設定ができない

display: inline;

以下の特徴があります。

横に要素が並ぶ
幅と高さを指定できない(文字の大きさ、長さで決まる)
左右の余白を調整できる
上下の余白を調整できない、または他のアイテムと重なってしまう
align設定ができる

display: inline-block;

以下の特徴があります。

横に要素が並ぶ
幅と高さを指定できる
余白を調整できる
align設定ができる

display: flex;

以下の特徴があります。

flexboxと呼ばれる
デフォルトでは、横に要素が並ぶ
flex-directionを指定すると、並ぶ方向と並び順を変えられる
子要素に並列幅の指定ができる
flex-wrapで折り返し動作を指定できる
gapやjustfy-contentで余白を調整することができる

display: grid;

以下の特徴があります。

グリッドレイアウトと呼ばれる
列数と行数をあらかじめ指定し、水平線と垂直線が交差してできたエリアに要素を配置する

display: none;

以下の特徴があります。

要素が、ブラウザ上で非表示になる
要素の読み込みは行われる

比較表

上記の要素を比較できるように、表にしました。

値	特性	新しい行で始まる	前後の要素と同行に表示	幅や高さを指定できる	テキストと同行に要素を配置しながらサイズを制御できる	レイアウトに含まれる	おすすめの使用場面
block	・常に新しい行で始まり、親要素の幅いっぱいを占有する・縦方向にスタックされ、上から下へ順番に表示される	○	×	○	×	○	レイアウトの主要な構成要素として使用される、セクションやディビジョンなどのブロックレベル要素に適しています
inline	・新しい行で始まらず、直前や直後の要素と同じ行に表示される。・幅や高さを指定できない	×	○	×	○	○	テキストやリンクなど、テキストの一部として表示されるインライン要素に適しています。
inline-block	・インライン要素の特性を持ちつつ、ブロック要素のように幅や高さを指定できる・テキストと同じ行に要素を配置しながら、サイズを制御できる	×	○	○	○	○	ボタンや画像など、テキストと同じ行に要素を配置しながら、サイズを制御したい要素に適しています。
none	・要素が完全に非表示になる・レイアウトにも含まれず、他の要素がその領域を占有する	×	×	×	×	×	レスポンシブデザインで特定の画面サイズで要素を非表示にする際に使用されます。
flex	・フレックスコンテナーを作成し、その子要素をフレックスアイテムとして配置する・要素を水平または垂直方向に配置し、レイアウトを柔軟に制御できる	×	×	○	×	○	レイアウトを柔軟に構築したい場合や、アイテムの順序や配置を制御したい場合に使用されます。
grid	・グリッドコンテナーを作成し、その子要素をグリッドアイテムとして配置する・要素を2次元のグリッド上に配置し、複雑なレイアウトを柔軟に構築できる	×	×	○	×	○	複雑なレイアウトを構築したい場合や、アイテムを複数の列や行に配置したい場合に使用されます。