目次
block（ブロック要素）は「親の幅」を見る
display: block の要素は 親の横幅いっぱいに広がる のが大きな特徴です。
つまり
- 幅（width）＝基本的に 親の横幅 に依存
- 高さ（height）＝ 中身（子） の高さに応じて決まる
という仕組みです。
▼ blockの基本例
<div class="parent">
<div class="child">こんにちは</div>
</div>.parent {
width: 400px;
background: #eee;
}
.child {
display: block;
background: #cfe7ff;
}子要素 .child は親 .parent の 400px に自動で広がります。
inline（インライン要素）は「内容量を見る」
span などのインライン要素は、
- 幅＝テキスト量
- 高さ＝行の高さ
つまり 親を広げない のが特徴です。
flex（Flexbox）は「親が子を並べる仕組み」
Flex では、display: flex を書くのは親 です。
理由は「親が子の並べ方を決める」仕組みだから。
<div class="parent">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>.parent {
display: flex;
gap: 20px;
}
.box {
background: #ffe2e2;
padding: 20px;
}親が決めること
- 横並びか縦並びか（flex-direction）
- 隙間の扱い（gap）
- 横のそろえ方（justify-content）
- 高さ揃え（align-items）
子が決めること
- 伸びる（flex-grow）
- 縮む（flex-shrink）
- 基準幅（flex-basis）
まとめ表
| 種類 | 親を見る？子を見る？ | どこで決まる？ |
|---|---|---|
| block | 親の“幅”を見る | 横幅は親、中身で高さ決定 |
| inline | 子の内容を見る | 親を広げない |
| flex | 親が子を並べる | 親のflex設定が最優先 |