CSSでのdisplayプロパティの活用と使い方の整理

はじめに

displayプロパティを多様しているけど、よくわかっていない。
なんとなくで進めていくことにモヤったので、整理のためにまとめました。
特にボタンを作る時に使うんだろうけど、毎回なんか？？？てなる。

結論

flex最強。

display: block;　➡️　たて並びに：インライン要素にあてられる
display: inline-block; ➡️　よこ並びに：インライン要素とブロック要素にあてられる
display: flex;　　➡️　　どの方向でも：ブロック要素かつ親要素にあてる

flex最強。

? displayプロパティってどんな使い方するの

要素の表示方法(縦横並び)を指定できる。

主要なdisplayプロパティの値とその使い方

1.　display: block;　：　インライン要素にあてる

インライン要素（a,span,imgなど）をたて並びに。
（ブロック要素のように高さと幅を自由に替えられる。）

2.　display: inline-block;　：　インライン要素とブロック要素にあてられる
インライン要素をよこ並びに。
（ブロック要素のように高さと幅を自由に替えられる。）

3.　display: flex;　：ブロック要素かつ親要素にあてる
display: flex;は親要素へ当てる。
そこにプロパティを追加することでフレックスコンテナ内の子要素を柔軟に配置できる。

【code】

index.html

<div class="flex-container">
  <div class="flex-item">アイテム1</div>
  <div class="flex-item">アイテム2</div>
  <div class="flex-item">アイテム3</div>
</div>

style.css

.flex-container {/* ← 親要素*/
  display: flex;
  justify-content: space-between; /* 子要素を均等に配置 */
  align-items: center; /* 子要素を縦方向に中央揃え */
  border: 1px solid #ccc;
  padding: 20px;
}

.flex-item {/*子要素自身のスタイルのみあてる*/
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
}

【見た目】

4. display: inline;
ブロック要素をインライン要素にする。あんまり使わない。
・特徴: 他の要素と同じ行に並び、幅は内容に応じて決まる。
　　　 高さと幅を設定できない。→ display: inline-block;使った方がいじりやすい。

おわりに

私が今知っている限りのdisplayプロパティはそんなに複雑じゃなかった。
親子要素の関係と表示（縦横）の2軸があるように感じていて、それがごちゃ混ぜになっていました。
ゆーてflex最強論があるようなので、その意味がわかるようになりたいです。

※初学者故に誤りがあるかもしれません。
もし親切な方がいらっしゃいましたら、ご指摘頂けますと幸いです。
よろしくお願いいたします。