displayはHTML要素の表示方法を指定するCSSプロパティです。非表示(none）にしたり、ブロック要素(block）にしたり、インラインブロック（inline-block）にするなど、デフォルトの表示方法から変更できます。
display: type;表示要素の種別を、次のいずれかから指定する。
| 値 | 説明 |
|---|---|
| run-in | 前後関係によりブロック要素かインライン要素か決まる。 |
| 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 | テーブルのセル |
| table-caption | caption要素と同じ |
<span style="display:block">first</span>
<span style="display:block">second</span>
<span style="display:block">third</span>子要素（フレキシブル・ボックスのアイテム）の並べ方を細かく指定するには、display:flexに加えて、以下に示すCSSプロパティを指定する。
| 属性 | 説明 |
|---|---|
| flex-direction | 子要素を並べる方向と向きを指定する。 |
| justify-content | 子要素の水平方向の配置を指定する。 |
| align-items | 子要素の垂直方向の配置を指定する。 |
フレキシブルボックスのコンテナ内にアイテムを左から右へ横に並べる。
<div style="display:flex;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>フレキシブルボックスのコンテナ内にアイテムを右から左へ横に並べる。
<div style="display:flex; flex-direction:row-reverse;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>フレキシブルボックスのコンテナ内にアイテムを上から下へ縦に並べる。
<div style="display:flex; flex-direction:column;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>フレキシブルボックスのコンテナ内にアイテムを下から上へ縦に並べる。
<div style="display:flex; flex-direction:column-reverse;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>子要素を中央揃えにするには、CSSのjustify-content属性にcenterを指定する。
<div style="display:flex; justify-content:center;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>子要素を右揃えにするには、CSSのjustify-content属性にflex-endを指定する。
<div style="display:flex; justify-content:flex-end;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>子要素を両端揃えにするには、CSSのjustify-content属性にspace-betweenを指定する。
<div style="display:flex; justify-content:space-between;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>子要素を水平方向に均等に配置するには、CSSのjustify-content属性にspace-aroundを指定する。
<div style="display:flex; justify-content:space-around;">
<div>child1</div>
<div>child2</div>
<div>child3</div>
</div>子要素を垂直方向で下揃えに配置するには、CSSのalign-items属性にflex-endを指定する。
<div style="display:flex; align-items:flex-end;">
<div>child1</div>
<div>
<div>child2.1</div>
<div>child2.2</div>
<div>child2.3</div>
<div>
<div>child3</div>
</div>子要素を垂直方向で中央揃えに配置するには、CSSのalign-items属性にcenterを指定する。
<div style="display:flex; align-items:center;">
<div>child1</div>
<div>
<div>child2.1</div>
<div>child2.2</div>
<div>child2.3</div>
<div>
<div>child3</div>
</div><div style="display: grid;">
<div>first</div>
<div>second</div>
<div>third</div>
</div><div style="display:inline">first</div>
<div style="display:inline">second</div>
<div style="display:inline">third</div><div style="display:inline-block">first</div>
<div style="display:inline-block">second</div>
<div style="display:inline-block">third</div><span style="display:list-item">first</span>
<span style="display:list-item">second</span>
<span style="display:list-item">third</span>first second third
CSSのdisplay属性にnoneを指定する例を示す。
Here is <span style="display:none">none</span> element.Here is element.
「display:none」は要素を表示しないうえ、余白も生じない。余白を残したい場合は、「visibility:hidden」を使用する。
Here is <span style="visibility:hidden">hidden</span> element.Here is element.
JavaScriptからCSSプロパティ「display」を参照・設定するには、Elementオブジェクトのstyleプロパティを使う。
<div id="foo">example</div>
<script>
document.getElementById("foo").style.display = "none";
</script>
World Wide Web Consortium (2021) CSS Display Module Level 3