CSS の min-content と max-content とは何ですか?それらは本質的なサイズ設定にどのような影響を与えますか?

CSS の min-content と max-content を理解する

CSS の固有ディメンション

CSS サイジング レベル 3 では、固有ディメンションの概念が導入されました。親ボックスではなく、ボックスの内容に基づいて決定されます。これは、ボックスの親ボックスによって決定される外部寸法とは対照的です。

min-content

min-content は、コンテンツのオーバーフローを防ぐボックスの最小の幅または高さを定義します。実際には、切り捨てやスクロールを行わずにすべてのコンテンツを収容できるボックスの最小サイズに相当します。

最小コンテンツを視覚化する簡単な方法は、float の動作を使用することです。ボックスがフローティングされ、親コンテナーが特定の幅を持つ場合、フローティングされたボックスは、コンテンツがその境界内に収まる点まで縮小します。この最小幅は実質的に min-content の値です。

max-content

一方、max-content は、ボックスに無制限の使用可能なスペースがある場合のボックスの理想的なサイズを表します。これは、max-content を使用すると、コンテンツのオーバーフローや空白のギャップを発生させることなく、ボックスを自然なサイズに拡張できることを意味します。

max-content を実証するには、幅が次のように設定されたコンテナ内に配置されたフローティング ボックスを考えてみましょう。 99999999999999999px などの非常に大きな値。コンテナの幅が増加すると、フローティング ボックスが拡張して利用可能なスペースを埋め、空きスペースやオーバーフローが発生することなく最大幅に達します。この最大幅は、最大コンテンツの値を表します。

追加メモ

最小コンテンツと最大コンテンツの定義は時間の経過とともに進化してきましたが、その基本的な原則は一貫しています。これらのプロパティにより、ボックスの寸法をより柔軟に制御できるようになり、レイアウト内のスペース利用率を最大化しながら、コンテンツが効果的に表示されるようになります。

以上がCSS の min-content と max-content とは何ですか?それらは本質的なサイズ設定にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。