【CSS】displayプロパティの2値構文

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSのdisplayプロパティの2値構文についてあれこれ。

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】
ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…
weblife.ppmp556.com

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値使うメリットはいまのところ特にはないです。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧