CSS サイズ設定における「min-content」と「max-content」はどのように異なりますか?

CSS サイズ設定における min-content と max-content を理解する

CSS のサイズ設定では、min-content や max-content などの固有のディメンションが可能になります。これは、親ボックスに依存するパーセンテージなどの外部ディメンションとは異なります。固有寸法はボックス自体の内容から生じます。

ボックスの固有寸法

固有寸法は、ボックスの内容に関係なく、ボックスの固有のサイズを定義します。でのその配置document.

min-content

min-content 値は、コンテンツのオーバーフローを避けるためのボックスの最小幅を表します。これは、ボックスがその親ボックスの幅 0 でフローティングされた場合に発生する幅と同等です。たとえば、 #red { width: min-content } は #blue { float: left; と同じ幅になります。 #ブルー > #red { 幅: 0px } }。このシナリオでは、min-content により #red 内のテキストがオーバーフローしないようにします。

max-content

max-content は、次のボックスの理想的な幅を計算します。無限の利用可能なスペース。これは、空きスペースを最小限に抑えながら、ボックスが中身をあふれさせることなく収まる最小サイズを表します。 min-content と同様に、float を使用してこれを実証できます。 #blue { float: left; #ブルー > #red { 幅: 最大コンテンツ } }。この場合、max-content により、#red は #blue 内の x 軸上の利用可能なスペースをオーバーフローすることなく完全に利用できるようになります。

他のプロパティのステータス

プロパティFit-ContentやStretchなどは開発中のため、将来的に仕様が変更される可能性があります。より安定した状態に達したら、このディスカッションに追加されます。

以上がCSS サイズ設定における「min-content」と「max-content」はどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。