くまだどうも、くまだです。
CSSのdisplayプロパティの2値構文についてあれこれ。
displayの2値構文
displayプロパティの2値構文とは、displayプロパティの値のところに、2つ入れて指定する書き方です。
例えば、display: flex;ならdisplay: block flex;のように書くことができます。
<div class="wrap">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>.wrap {
block-size: 100vh;
display: block flex; /* display:flex; */
align-items: center;
justify-content: center;
}
.box {
inline-size: 100px;
block-size: 100px;
background-color: red;
}
.boxes {
display: block flex; /* display:flex; */
gap: 20px;
}
display:block;やdisplay:inline-block;なら、以下のように指定できる。
.boxes {
display: block flow; /* display:block */
display:inline flow-root; /* display:inline-block*/
}こんな感じで、外部と内部で2つの値を指定できます。
display 外側 内側;display: block flex;なら、外部がブロック要素のふるまい、内部がフレックスのふるまいとして扱うことができる。
ただし、外部にいれられるのはblockとinlineの2つだけ。
| 単一の値 | 2値の構文 |
|---|---|
| display: block; | display: block flow; |
| display: flow-root; | display: block flow-root; |
| display: inline; | display: inline flow; |
| display: inline-block; | display: inline flow-root; |
| display: flex; | display: block flex; |
| display: inline-flex; | display: inline flex; |
| display: grid; | display: block grid; |
| display: inline-grid; | display: inline grid; |
2024年6月時点では最新ブラウザですべて対応済です。
単一の記述と2値の記述で使い分けどうするか、という点ですが、使い分けというよりも「2値でも書けるようになった」のと「単一の記述は古い書き方」というぐらい。とはいえ、2値使うメリットはいまのところ特にはないです。
ここまで読んでくださりありがとうございました。