今どきのCSSのdisplayプロパティを使ってレイアウトを組んでみる

display: contentsがググラビリティが低く、いつも忘れるので、使い方の例と合わせて忘備録として残しておきます 👀

今回使う CSS display プロパティの値

引用は、MDN Web Docsからの引用です。

display: flex

要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。

Can I use (flexbox)

display: grid

要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。

Can I use (css-grid)

display: contents

これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 contents の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。

Can I use (css-display-contents)

コード

html

<div class="content">
  <ul class="list">
    <li class="list__item list-item">
      <div class="list-item__label">
        短いラベル
      </div>
      <div class="list-item__value">
        短い値
      </div>
    </li>
    <li class="list__item list-item">
      <div class="list-item__label">
        なが〜〜〜〜〜〜〜〜〜〜〜〜〜いラベル
      </div>
      <div class="list-item__value">
        なが〜〜〜〜〜〜〜〜〜〜〜〜〜い値<br>
        なが〜〜〜〜〜〜〜〜〜〜〜〜〜い値
      </div>
    </li>
  </ul>
</div>

css

.content {
  padding: 20px;
}

.list {
  /* 1カラム目は自身の幅で。2カラム目は残りの幅で。 */
  display: grid;
  grid-template-columns: auto 1fr;
}

.list__item {
  /* none*/
  /* 存在しないBoxなのでここにスタイルを書いても適用されない */
}

.list-item {
  display: contents;
}

.list-item__label,
.list-item__value {
  display: block;
  padding: 10px;
  /* 上下中央揃え */
  display: flex;
  align-items: center;
}

.list-item__label {
  background-color: #666;
}

.list-item__value {
  background-color: #aaa;
}

できたもの

Code Pen