`min-content` と `max-content` は CSS ボックスのサイズをどのように決定しますか?

最小コンテンツと最大コンテンツはどのように機能しますか?

固有ディメンションの概要

CSS のサイズ設定では、固有次元の概念は外部次元と対照的です。 min-content や max-content などの固有のディメンションは、ボックス内に含まれるコンテンツによって決定されるプロパティを参照し、ボックスを親ボックスから独立させます。これは、親ボックスの寸法に依存する外部寸法とは対照的です。

min-content の定義

min-content は、ボックスの最小幅を表します。中身が箱自体から溢れることはありません。これは、コンテンツのオーバーフローを回避する実現可能な最小の幅に相当します。

例

「blue」という名前の別のボックス内にある「red」という名前のボックスを考えてみましょう。 「red」の幅が min-content に設定されている場合、その計算された幅は、「blue」の幅が 0 の場合に想定される幅になります。この幅は、オーバーフローを引き起こさずに「red」のコンテンツを収容するために必要な最小スペースを表します。

最大コンテンツの定義

最大コンテンツは「理想的」です。指定された軸に沿ったボックスのサイズ。オーバーフローを防ぎながら、未充填のスペースを最小限に抑えることを目的としています。言い換えると、ボックスの内容が最大の可能性に達するまでその軸上で拡張することにより、利用可能なスペースを最大限に活用することを表します。

例

前と同様たとえば、「赤」が「青」の中に浮かんでいます。ただし、今回は「青」の幅を大きな数値（実質的には無限）に設定します。 「red」の幅を max-content に設定すると、「blue」内で利用可能な最大スペースを無駄なく占有するように拡張されます。これは、「red」のコンテンツに使用可能なスペースを最大限に活用していることを表します。

以上が`min-content` と `max-content` は CSS ボックスのサイズをどのように決定しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。