`flex：1の組み合わせの素晴らしい使用。幅：0; `フレックスレイアウト：なぜ2番目の子要素が` width：0; `に設定された後、最初の子要素を正常に表示できるのはなぜですか？

フレックスレイアウトスキル： flex: 1; width: 0;絞る子供の要素の問題を解決します

FlexレイアウトはWebレイアウトで広く使用されていますが、場合によっては、子要素が互いに絞る問題に遭遇することがあります。この記事ではflex: 1; width: 0;組み合わせと、フレックス容器のサブエレメントが絞られている状況を回避する方法。

次のコードスニペットには一般的な問題があります。フレックスコンテナには2つの子要素が含まれています。最初の子要素は固定幅を設定し、2番目の子要素は残りのスペースを占有し、最初の子要素はほとんど見えません。

<div style="width: 350px; display: flex;">
    <div style="width: 50px; height: 50px; background-color: blanchedalmond;"></div>
    <div style="flex: 1; width: 0; white-space: nowrap;">
        <div>CSS3フレックスレイアウト、テキストは.css3フレックスレイアウトを超え、テキストは.css3フレックスレイアウトを超え、テキストは.css3フレックスレイアウトを超え、テキストは超えます。</div>
    </div>
</div>

width: 0; 2番目の子要素に？キーは、フレックスレイアウトのスペース割り当てメカニズムにあります。

display: flexの場合、子要素がFlexプロジェクトになります。フレックスレイアウトは、プロジェクトのプロパティに従ってスペースを割り当てます。デフォルトでは、アイテムがmin-widthとmin-heightがautoています。 width 1つのプロジェクトのみで設定され、他のプロジェクト幅が指定されていない場合、 widthのあるアイテムが圧縮される場合があります。これが、上記のコードの最初の要素が絞られている理由です。

ただし、2番目のプロジェクトがwidth: 0;およびflex: 1;同時に、状況は変わります。フレックスレイアウトは、すべてのアイテムの幅を計算します。 width: auto要素タイプに依存します：ブロックレベルの要素は、利用可能なスペースの完全な使用を表し、インライン要素は適切なサイズに縮小することを表します。

width: 0;およびflex: 1; 2番目のプロジェクトがスペースを占有しないことを許可します。 flex: 1残りのスペース（350px -50px = 300px）を割り当てます。このようにして、最初の要素は絞られません。

min-widthまたはwidth: 0;問題を解決できます。Flex flex-shrink: 0;最初の要素が圧縮されるのを防ぐために、これはフレックスレイアウトの設計概念に沿ったものです。

以上が`flex：1の組み合わせの素晴らしい使用。幅：0; `フレックスレイアウト：なぜ2番目の子要素が` width：0; `に設定された後、最初の子要素を正常に表示できるのはなぜですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。