display:noneの解除方法｜そのほかの指定できる値も解説
更新日：2024年04月30日
flex
display:flexと指定すると、フレックスボックス（フレキシブルボックス）を生成できます。フレックスボックスはCSS3で追加された新しいレイアウト技法で、簡単に要素を横並びにすることができます。
横並びにした際に自動で高さが調整されたり、自由に並び順を変えられたりするなど、柔軟なレイアウトを組める便利な技法です。
grid
display:gridと指定することで、グリッドレイアウトを適用できます。グリッドレイアウトとは、格子状に分割してホームページのレイアウトを組んでいく手法で、きれいに整列されているため、全体的に統一感が出やすいです。
flow-root
displayプロパティに指定できる値として、flow-rootも挙げられます。display:flow-rootは、floatプロパティで要素を横並びにした際に起こる回り込みを解除するときによく使われます。
inline-block
inline-blockと指定することで、インライン要素のように扱われるブロック要素を生成できます。この要素はinlineとblockの間を取ったような性質を持っており、前後に改行が入らず横に並んでいきますが、幅や高さ、上下左右の余白の指定ができます。
inline-table
displayプロパティの値にinline-tableを指定することで、インライン要素のように扱われるテーブルを生成できます。インライン要素の性質を持つので、前後の文章などがテーブルの横に並びます。
inline-flex
inline-flexと指定することで、インライン要素のように扱われるフレックスボックスを生成できます。display:flexとは異なり、inline-flexで指定した要素同士を横並びにできます。
inline-grid
初回公開日：2022年07月27日
記載されている内容は2022年07月27日時点のものです。現在の情報と異なる可能性がありますので、ご了承ください。
また、記事に記載されている情報は自己責任でご活用いただき、本記事の内容に関する事項については、専門家等に相談するようにしてください。