Chrome 115 以降、CSS 表示プロパティには複数の値があります。 「display: flex」は「display: block flex」になり、「display: block」は「display: block flow」になります。現在、既知の単一の値はレガシーとみなされますが、下位互換性のためにブラウザ内に保持されています。

なぜ長い間遅れているのでしょうか？

要するに: ボックス モデルなどを説明する方法が変わります。この仕様はまだ CR スナップショットであり、W3C が実装者から経験を収集して標準を完成させることを意味します。したがって、一部はまだ変更される可能性があります。

リワークにより、表示タイプが外側の表示タイプと内側の表示タイプの 2 つの部分に分割されました。

外側の表示タイプは、プリンシパル ボックス自体がフロー レイアウトにどのように参加するかを決定します。

内部の表示タイプは、その子孫ボックスがどのようにレイアウトされるかを決定します (置換された要素を除き、これはもう少し複雑です)。

したがって、display: flex は、display: block flex になります。これは、外側の表示タイプが block であることを意味します (外側ではブロック要素として動作します)。ただし、その子要素は flex レイアウトに従ってレンダリングされます。

これは以前と同じ動作ですが、この変更により、子要素と周囲の要素に関する表示プロパティの影響について話すことができるようになります。私の意見では、このメンタル モデルを使用すると、より予測可能なレイアウトを作成しやすくなり、さまざまなレイアウト モードとその効果を説明しやすくなります。

新しいコースやチュートリアルでは、ボックス モデルの適切な説明で、マージン、境界線、パディング、幅、高さだけでなく、ボックスのサイズ設定や表示プロパティもカバーする必要があります。

表示プロパティの有効な値は何ですか?

すでに述べたように、一部の古いプロパティは現在レガシーになっています。有効なプロパティはすべて次のとおりです:

複数値の構文表示の場合: 外側の型 内側の型 有効な外側の型は、block、inline、および run-in です。有効な内部表示タイプは、flow、flow-root、table、flex、grid、 です。 ]ルビー.

有効な単一値もあります: list-item、contents、および none。

それに加えて、CSS には有効なままの内部表示値がいくつかあります。これらの値は、テーブルまたはルビ表示タイプを使用するときに計算されます。

次の組み合わせはレガシーになりました: inline-block、inline-table、inline-flex、および inline-grid 。これらは、複数の値に相当するものに置き換えることができます (例: display: inline flex.

複数値は最新のブラウザの最近のバージョンでサポートされています: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

表示プロパティの複数キーワード値に使用します。

以上です!

読んでいただきありがとうございます！