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

CSS の 'min-content' と 'max-content' の機能を調べる

CSS の固有のディメンションを理解する

CSS では、内部次元と外部次元の区別は重要です。 「min-content」や「max-content」などの固有のディメンションは、要素自体に固有のプロパティです。一方、「width: 80%;」などの外部寸法は、親要素の寸法に基づいて計算されます。

'min-content' の定義

CSS サイズ設定レベル 3 による, 「min-content」は、コンテンツのオーバーフローを防ぐ、要素の可能な最小の幅または高さを表します。要素内の最も長いテキストまたはコンテンツの幅に合わせて動的に調整されます。

「max-content」について

対照的に、「max-content」は要素の理想的なサイズを表します。使用可能なスペースが無制限の特定の軸にあります。これは、要素のコンテンツを未使用のスペースなしで完全に囲む最小の幅または高さを表します。

浮動要素による視覚化

「min-content」の概念を示す次のコード例を考えてみましょう。 :

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

このシナリオでは、#blue 要素の幅が 0 ピクセルに近づくと、#red #red 内のテキスト コンテンツがオーバーフローするまで、要素の幅はそれに応じて縮小します。この時点で、「min-content」の幅は #red の幅になります。

無限スペースのデモンストレーション

「max-content」を説明するために、次の例では非常に大きな幅を割り当てています。 to #blue:

#blue {
  width: 99999999999999999px;
}
#blue > #red {
  float: left;
}

この場合、#blue の幅は実質的に無限になるため、#red の幅は、未使用のスペースのないコンテンツ。この幅は「max-content」幅として知られています。

関連プロパティの改良が進行中

「fit-content」や「stretch」などの他の関連プロパティは現在開発中です。将来的に機能が変更される可能性があります。それらの定義が安定したら、この説明に組み込まれる予定です。

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