詳細

  • display: block

    • 親要素も display: block の場合、横いっぱいに広がろうとする.

    • display: block 要素同士は間に改行が入るように解釈されるために縦に並ぼうとし、横に並ぶことはない.

    • 一般的なユーザーエージェントスタイルシートでは body 要素が display: block であるため、 インライン要素や flex 要素が間に入らない限りは基本的に常に横いっぱいに表示される.

    • width や height で幅を設定することはできる. ただし、横に並ぶことはない.

  • display: inline

    • 横に並ぼうとする.

    • 幅・高さを持たず、中に含んでいる要素の幅・高さが自動的に自身の幅・高さとして設定される.

  • display: flex

    • 中に含む要素を flexbox のルールに従って並べようとする.

    • 中の要素数が 1 つだけの場合でも、 display: block のように自動的に横に伸びたりはしない.

    • 中の要素が display: block であっても、その要素は横に伸びない. (親要素が display: block でないため). そのような場合、 要素に対して明示的に width: 100% のように幅を設定しなければならない.