display 箱の役割と、中の並び方を決める

要素が、親の中でどんな箱になるかと、自分の子をどう並べるかを決める場合に使います。色やフォントと違い、デザインカンプの「段」「列」「中央寄せ」に直結します。

影響する範囲は、だいたい次の2つです。

1. 自分の外側：親の並びの中で、行の途中に乗るか、幅いっぱいに塊になるか。
2. 自分の内側：子を縦に積むか、横に並べるか、格子にするか。flex と grid は、ここが変わります。

子の孫までは、この指定だけでは変わりません。内側にも同じ並びが要る場合は、その要素にも別に指定します。

値ごとのページです。

• display: block … 幅いっぱいに積み上げる
• display: inline … 文字の流れに乗せる
• display: inline-block … 行の中で箱の寸法を持つ
• display: flex … 子を一方向に並べて寄せる
• display: inline-flex … 行の中のフレックスの親要素
• display: grid … 子を行と列で組む
• display: inline-grid … 行の中のグリッドの親要素
• display: none … 箱自体を作らない

寄せ方の使い分けです。text-align は、箱の中の文字やインラインを左右に寄せます。幅の決まったブロックを画面の中央へ置く場合は margin-left と margin-right の auto です。カードを横一列にして両端や中央へ寄せる場合は、親に flex や grid を付けてから justify-content や place-items を使います。