ひとりCSS Advent Calendar 2022 24日目です。
displayプロパティを見てみます。
displayプロパティ
ジャンル分けは個人的な考え方です
- はこ系
- block - ボックスになる
- flex - Flexbox をつくる
- grid - Grid layout をつくる
- インライン系
- inline - span みたいな感じになる
- inline-block - inlineとblockの良いところを足した感じ。結構使う
- inline-flex - Flexbox の inline バージョン
- inline-grid - Grid layout の inline バージョン
- その他
- flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
-
- flow-root
- テーブル
- table
- table-row
- リスト
- list-item
- ないものとされる
- none - 表示がなくなる
- contents - 自分自身のボックスが消える（＝中身は消えない）べんり
- 2つ値もできる
- inline flow-root - inline-block と同じ
- とか
display:contents のサンプル
display:contents を指定する前
display:contents を2個目のピンク色のボックスに設定したとき
<div class="wrapper">
<div class="inner">box text</div>
</div>
<div class="wrapper contents">
<div class="inner">box text</div>
</div>
:root {
--color1: #edb658;
--color2: #e7719b;
}
.contents {
display: contents;
}
.wrapper {
padding: 1em; // 無効化される
background: var(--color2); // 無効化される
}
.wrapper + .wrapper {
margin-top: 2em; // 無効化される
}
.inner {
padding: 1em;
background: var(--color1);
}
感想
- display プロパティに2値書けるの知らなかった
- display:contents、便利。好き