Die wunderbare Verwendung der Kombination von 'Flex: 1'; Breite: 0; `In Flex -Layout: Warum kann das erste untergeordnete Element normal angezeigt werden, nachdem das zweite untergeordnete Element auf' Breite 'eingestellt ist: 0;'?

Flex -Layout -Fähigkeiten: Verwenden Sie flex: 1; width: 0; Lösen Sie das Problem von Kinderelementen, die quetschen

Das Flex -Layout wird im Weblayout häufig verwendet, aber manchmal stößt es auf das Problem der Kinderelemente, die sich gegenseitig drücken. In diesem Artikel wird die Verwendung von flex: 1; width: 0; Kombination und wie man die Situation vermeidet, in der Unterelemente im Flex-Behälter gepresst werden.

Das folgende Code -Snippet zeigt ein gemeinsames Problem: Ein Flex -Container enthält zwei untergeordnete Elemente, das erste untergeordnete Element legt eine feste Breite fest und das zweite untergeordnete Element nimmt den verbleibenden Raum ein, was dazu führt, dass das erste untergeordnete Element nahezu unsichtbar ist.

<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 Flex -Layout, Text überschreitet .css3 Flex -Layout, Text übersteigt .CSS3 Flex -Layout, Text übersteigt .CSS3 Flex -Layout, Text überschreitet.</div>
    </div>
</div>

Warum kann das erste untergeordnete Element normal nach dem Hinzufügen width: 0; zum zweiten Kinderelement? Der Schlüssel liegt im Raumzuweisungsmechanismus des Flex -Layouts.

Beim display: flex wird das untergeordnete Element zum Flex -Projekt. Das Flex -Layout verteilt Platz nach Projekteigenschaften. Standardmäßig sind die Elemente min-width und min-height auto . Wenn nur ein Projekt für width festgelegt ist und die andere Projektbreite nicht angegeben ist, können die Elemente mit width komprimiert werden. Aus diesem Grund wird das erste Element im obigen Code gepresst.

Wenn das zweite Projekt jedoch width: 0; und flex: 1; Gleichzeitig ändert sich die Situation. Das Flex -Layout berechnet die Breite aller Elemente. width: auto hängt vom Elementtyp ab: Blockebene sind die vollständige Nutzung des verfügbaren Raums und Inline-Elemente repräsentieren das Schrumpfen auf die entsprechende Größe.

Eine Kombination aus width: 0; und flex: 1; Ermöglicht dem zweiten Projekt keinen Platz. flex: 1 Zuordnungen den verbleibenden Platz (350px - 50px = 300px). Auf diese Weise wird das erste Element nicht gequetscht.

Obwohl min-width oder width: 0; Kann das Problem lösen, es wird empfohlen flex-shrink: 0; Um zu verhindern, dass das erste Element komprimiert wird, entspricht dies eher dem Entwurfskonzept des Flex -Layouts.

Das obige ist der detaillierte Inhalt vonDie wunderbare Verwendung der Kombination von 'Flex: 1'; Breite: 0; `In Flex -Layout: Warum kann das erste untergeordnete Element normal angezeigt werden, nachdem das zweite untergeordnete Element auf' Breite 'eingestellt ist: 0;'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!