Flex レイアウトで Flex-Grow が項目の元のサイズを尊重するようにするにはどうすればよいですか?

元のサイズに基づいて項目を Flex-Grow 展開する

Flex レイアウトでは、flex-grow プロパティを使用して項目間で使用可能なスペースを比例的に分配できます。ただし、デフォルトでは、flex-grow はこれらの項目の元のサイズを無視します。

問題: 均等化された項目サイズ

flex-grow を に設定して flex を使用すると、 1、行内のすべてのアイテムは利用可能なスペースを埋めるために引き伸ばされ、結果は等しくなります。 widths:

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Single</div>
  <div class="item">Larger title</div>
  <div class="item">Another really large title</div>
</div></p>
<p><img src="https://img.php.cn/" alt="How Can I Make Flex-Grow Respect Item's Original Size in a Flex Layout?
"></p>
<p><h3>解決策: flex-auto</h3></p>
<p>を使用した相対的なサイズ設定</p>
<pre class="brush:php;toolbar:false">.container {
  display: flex;
}

.item {
  flex: auto;
}

に基づいて項目を展開するには元のサイズの場合は、flex-basis: auto を使用できます。これにより、ブラウザーは利用可能なスペースを計算するときにコンテンツ サイズを考慮するように指示されます。

flex: auto を使用すると、項目は元の幅に比例して利用可能なスペースを埋めるようになります:

説明

flex-grow は依然として空き領域の分配方法を決定しますが、フレックスベーシス値が最初に考慮されます。 flex-basis が auto の場合、ブラウザは各項目の固有のサイズを決定し、それを使用可能なスペースから差し引きます。残りのスペースは、flex-grow 値に基づいて分配されます。

この例では、すべての項目が同じ flex-grow 値 (1) を持つため、利用可能なスペースは均等に分配されます。ただし、タイトルが大きい項目の固有サイズが広いため、残りのスペースのより大きな部分を受け取ります。

以上がFlex レイアウトで Flex-Grow が項目の元のサイズを尊重するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。