Widely available YES。主要ブラウザで対応済み。新規コードでの採用を検討できる。
レイアウト Widely available

Two-value display syntax

従来の display: flex は「ブロックレベルの Flex コンテナ」を暗示していたが、外部表示（block）と内部表示（flex）の区別が不明瞭だった。2値構文では display: block flex と書くことで、外側はブロック、内側は Flex であることを明示できる。コードの意図が読み取りやすくなる。

構文レイアウト

概要

従来の display: flex は「ブロックレベルの Flex コンテナ」を暗示していたが、外部表示（block）と内部表示（flex）の区別が不明瞭だった。2値構文では display: block flex と書くことで、外側はブロック、内側は Flex であることを明示できる。コードの意図が読み取りやすくなる。

対応ブラウザ

デスクトップ

Chrome 115+
Edge 115+
Safari 15+
Firefox 70+

モバイル

Chrome Android 115+
Safari iOS 15+
Firefox Android 79+

基本構文

CSS 
/* 従来の構文 */
.container { display: flex; }
.inline-container { display: inline-flex; }

/* 2値構文（等価） */
.container { display: block flex; }
.inline-container { display: inline flex; }

/* Grid でも同様 */
.grid { display: block grid; }
.inline-grid { display: inline grid; }

実務での使いどころ

  • コードの可読性向上

    display: block flex と明示することで、外部表示と内部表示の意図がコードから即座に読み取れる。

  • 学習とドキュメンテーション

    CSS の display モデルを理解する上で、2値構文は外部・内部の概念を直接反映し、学習の助けになる。

注意点

  • 既存のコードとの混在で統一性が損なわれる場合がある。チームでの記法統一を推奨。
  • Chrome 115 未満はサポートされないため、レガシーブラウザ向けには従来の1値構文を使用する。

アクセシビリティ

  • display の構文変更のみで、レンダリング結果やアクセシビリティへの影響はない。

参考リンク