noneは、表示・非表示の切り替え時にこれまでもよく利用してきましたが、contentsは、余り馴染みがありませんので、使い方を探ってみましょう。

ブラウザの対応状況

ブラウザの対応状況をcaniuseで調べたところ、Safariで多少バグがあるようですが、IE11以外のモダンブラウザでは、概ね利用できる状態です。

試しに設定してみる

実際にdisplay:contents;を設定するとどうなるのでしょうか。

div1のコンテンツ
    
pのコンテンツ

div2のコンテンツ
    
pのコンテンツ

2つの<div>を用意して、コンテンツ1は、そのままdisplay:block;コンテンツ2は、display:contents;を設定してみました。

    div {
      border: 3px solid #006ab6;
      padding: 1em;
      background-color: #82c1ea;
      color: blue;
    }

    div p {
      background-color: #fff;
      padding: 1em;
      border: 1px solid #000;
      margin:0; /*上下のmarginを0に*/
    }

    .content1 {
      display: block;
      /*デフォルトだけどblockを設定*/
    }

    .content2 {
      display: contents;
      /* contenstsを設定 */
    }

上図↑のdisplay:block;が設定されたコンテンツ1には、borderやbackground-color、paddingが効いていますが、下図↓のdisplay:contents;のコンテンツ2は、描画されていません。
しかし、文字の色colorは設定されています。

DevToolsでも文字「div2のコンテンツ」は選択できますが、<div class="content2"></div>は選択できません。
このように、要素自体はボックスを生成しませんが、その子や疑似要素は通常通りボックスやテキストランを生成します。（W3C仕様）

display:contents;を設定した要素の属性、form要素やform要素内のパーツ、a要素、JavaScriptのイベントなどに関して詳細な解説は、「 [CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック | コリス」にて解説されています。こちらのコリスの記事では、gridレイアウトのマークアップをセマンティックにするために利用されています。
最新の記事「モダンCSSによる絶対配置（position: absolute;）の削減 | コリス」では、親要素をcontents;に設定することで、position: absolute;を使わずにflexのみで要素の位置の入れ替える方法が紹介されています。

flexの中のflexが必要なくなる

実際に、学生の制作物などでよく見かけるのが、display:felx;でレイアウトした中に、<ul>がある場合（別にul要素でなくても構わない）、<li>を横に並べられているレイアウトでは、子要素であるul要素にdisplay:felx;を設定することがあります。

  
ウェブDeBLOG
  

    
display:contents
    
display:contents;に関して、調べてみました。
  
  
  

    
バナー1
    
バナー2
  

例えば、上記のhtmlを図のように配置したい時には

main {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  width: 30%;
}

.contents {
  width: 45%;
}

aside {
  width: 25%;
}

.banner {
  list-style: none;
  display: flex;
  width: 100%;
}

.banner li {
  width: 50%;
  text-align: center;
}

というように、 main要素でdisplay:felx;を設定し、追い出した.bannerのul要素にもdisplay:felx;を設定する必要があります。
もう少し複雑になると、display:felx;だらけになってしまいます。

ul.bannerにdisplay:contents;

そこで、.bannerのul要素にflexの代わりにcontentsを設定してみると同じ表示になりました。

.banner {
  list-style: none;
  display: contents;
  width: 100%;
}

個人的には、display:felx;が重なるよりは、見やすくなるかな程度ですが、今後、display:grid;など、使えそうな場面がありそうなので、意識して使っていきたいと思います。

See the Pen display:contents; by tridentwebdesign (@tridentwebdesign) on CodePen.

コリスの記事以外にも、色々と参考にさせていただきました。
まだ、それほどdisplay:contents;の使い方については記事が多くなかったので、まだ一般的ではないのかもしれません。

• 参考：リンクを押せなくする「display: contents」を使ったカバー / CSSの工具箱 | PersonWriter's Room
• 参考：【CSS】displayの使い方と種類一覧｜実務での注意点なども解説 | JAJAAAN
• 参考：More accessible markup with display: contents | hiddedevries.nl

体験入学実施中
Webデザイン学科

関連記事

• JavaScriptで要素を挿入する。 (2023/09/30)
• map()？new Map？ (2023/08/10)
• ポートフォリオサイトを印刷用CSSでプリントする。 (2022/03/05)
• @useの使い方がわからない…ので (2022/02/12)
• display:contentsを使ってみたい。 (2021/09/30)
• jQueryだっていいじゃない。 (2021/03/09)
• TypeScriptってなんだ?! (2021/03/01)
• CSSの単位 (2020/09/03)
• JavaScriptのclassについて、書いてみた。 (2019/12/30)
• picture要素と、source要素と、srcset属性と (2018/10/02)