まったく新しい表示プロパティ。

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

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

一言で言えば、ボックスモデルなどを説明する方法が変わります。この仕様はまだ 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

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

以上です!

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

以上がまったく新しい表示プロパティ。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。