Wie kann ich dafür sorgen, dass Flex-Grow die Originalgröße eines Elements in einem Flex-Layout respektiert?

Flex-Grow-Elemente basierend auf ihrer ursprünglichen Größe erweitern lassen

In Flex-Layouts kann die Flex-Grow-Eigenschaft verwendet werden, um den verfügbaren Platz proportional auf die Elemente zu verteilen. Allerdings ignoriert flex-grow standardmäßig die Originalgröße dieser Elemente.

Problem: Ausgeglichene Elementgrößen

Bei Verwendung von Flex mit eingestelltem „flex-grow“. 1: Alle Elemente in einer Reihe werden gedehnt, um den verfügbaren Platz auszufüllen, was zu einer Gleichheit führt Breiten:

.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>

Lösung: Relative Größenanpassung mit Flex-Auto

Um Elemente basierend auf zu erweitern Um ihre ursprüngliche Größe zu ändern, können wir „flex-basis: auto“ verwenden. Dadurch wird der Browser angewiesen, die Inhaltsgröße bei der Berechnung des verfügbaren Platzes zu berücksichtigen.

.container {
  display: flex;
}

.item {
  flex: auto;
}

Mit flex: auto füllen die Elemente nun den verfügbaren Platz proportional zu ihrer ursprünglichen Breite aus:

Erklärung

Flex-Grow bestimmt immer noch, wie der freie Speicherplatz verteilt wird, aber der Flex-Basis-Wert wird berücksichtigt Erste. Wenn „flex-basis“ auf „auto“ gesetzt ist, bestimmt der Browser die eigentliche Größe jedes Elements und zieht diese vom verfügbaren Platz ab. Der verbleibende Platz wird dann basierend auf den Flex-Grow-Werten verteilt.

In unserem Beispiel haben alle Elemente den gleichen Flex-Grow-Wert (1), sodass der verfügbare Platz gleichmäßig verteilt wird. Da das Element mit dem größeren Titel jedoch eine größere Eigengröße hat, erhält es einen größeren Teil des verbleibenden Platzes.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Flex-Grow die Originalgröße eines Elements in einem Flex-Layout respektiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!