CSS 固有サイズ設定の「min-content」と「max-content」とは何ですか?

固有のサイズ設定: min-content と max-content を理解する

CSS のサイズ設定レベル 3 では、ボックス内のコンテンツに基づいて計算される固有のサイズの概念が導入されています。その親ではなく。 min-content と max-content は、それぞれボックスの最小寸法と最大寸法を決定する固有のプロパティです。

内部寸法と外部寸法

ボックスの外部寸法は次から導出されます。親ボックスの寸法 (幅: 80% など)。対照的に、width: min-content などの固有のサイズは、ボックス自体の内容によって決まります。

min-content と max-content の定義

min-content :

• コンテンツを避けるボックスの最小幅オーバーフロー。
• ボックスの内容が狭い場合、オーバーフローが発生します。

max-content:

• 「理想的な」 " 使用可能なスペースが無制限のボックスの幅。
• ボックスは、中身を無駄なく完全に収容できるように拡張します。

最小コンテンツと最大コンテンツはどのように計算されますか?

最小コンテンツを視覚化するには、より広い包含ボックス (例: #blue):

#blue { width: 0px; }
#red { float: left; }

#blue の幅が次の場合、#red の最小コンテンツ幅はその幅と等しくなります。 0px で、#red のコンテンツがオーバーフローしないようにします。

同様に、max-content の場合、非常に広い #blue 内に #red が浮かんでいるのを視覚化します。

#blue { width: 99999999999999999px; } /* ~infinite */

最大コンテンツ幅の#blue の幅が事実上無限である場合、#red はその幅と等しくなり、#red の内容を完全に拡張できます。

追加の組み込みプロパティ

fit-content やストレッチなど、他の固有プロパティは現在開発中です。最終的な定義と実装に関する今後の更新にご期待ください。

以上がCSS 固有サイズ設定の「min-content」と「max-content」とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。