displayの種類について
新入社員の立原です。
本日はコーディングしている際によくお世話になっているdisplayタグについて、どんな種類があるのか疑問になったので調べたことをご紹介しようと思います!
inline:インラインボックスを生成する(初期値)
block:ブロックボックスを生成する
list-item:li要素のようにリスト内容が収められるブロックボックスと、リストマーカーのためのマーカーボックスを生成する
run-in:文脈に応じてブロックまたはインラインボックスのいずれかを作成する
inline-block:インラインレベルのブロックコンテナを生成する。要素全体としてはインライン要素のような表示形式だが、内部はブロックボックスで高さ・横幅などを指定できる。
table:table要素のような表示となる
inline-table:インラインレベルのテーブルとなる
table-row-group:tbody要素のような表示となる
table-header-group:thead要素のような表示となる
table-footer-group:tfoot要素のような表示となる
table-row:tr要素のような表示となる
table-column-group:colgroup要素のような表示となる
table-column:col要素のような表示となる
table-cell:td要素のような表示となる
table-caption:caption要素のような表示となる
none:要素が表示されず、レイアウトに影響を与えない
inherit:親要素の値を継承する
flex:ブロックレベルのフレックスコンテナボックスを生成する
inline-flex:インラインレベルのフレックスコンテナボックスを生成する
grid:ブロックレベルのグリッドコンテナボックスを生成する
inline-grid:インラインレベルのグリッドコンテナボックスを生成する
などなど…他にもあるようですが、今回は私がよく使うものと便利だと感じたものをピックアップしてみました。
table系は便利そうだと感じました!