Wie funktionieren die Eigenschaften flex-grow und…

flex-grow bestimmt, wie stark ein Element wachsen kann, wenn im Container freier Raum vorhanden ist. Ein Wert von 0 (Standard) bedeutet, dass das Element nicht wächst. Positive Werte geben den Wachstumsfaktor im Verhältnis zu anderen Flex-Elementen in derselben Zeile an.

flex-shrink bestimmt, wie stark ein Element bei Mangel an freiem Raum im Container schrumpfen kann. Ein Wert von 1 (Standard) bedeutet, dass es schrumpfen kann. Ein Wert von 0 verbietet das Schrumpfen. Positive Werte geben den Schrumpffaktor im Verhältnis zu anderen Flex-Elementen an.

Hier ein Beispiel:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Breite des Containers */
}

.item {
  flex-basis: 100px; /* Grundgröße jedes Elements */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Nimmt 1 Anteil des freien Raums ein */
  flex-shrink: 0; /* Wird nicht schrumpfen */
}

.item-2 {
  flex-grow: 2; /* Nimmt 2 Anteile des freien Raums ein */
  flex-shrink: 1; /* Kann schrumpfen */
}

.item-3 {
  flex-grow: 1; /* Nimmt 1 Anteil des freien Raums ein */
  flex-shrink: 1; /* Kann schrumpfen */
}

In diesem Fall beträgt die Gesamtsumme der Grundgrößen 300px (3 * 100px). Der freie Raum beträgt 100px (400px - 300px). Dieser Raum wird zwischen den Elementen 1, 2 und 3 im Verhältnis ihrer flex-grow-Werte verteilt: 1 + 2 + 1 = 4. Das Element 1 erhält 1/4 * 100px = 25px zusätzlichen Raum. Das Element 2 erhält 2/4 * 100px = 50px zusätzlichen Raum. Das Element 3 erhält 1/4 * 100px = 25px zusätzlichen Raum.

Die Endgrößen sind: Element 1: 100px + 25px = 125px Element 2: 100px + 50px = 150px Element 3: 100px + 25px = 125px

Wenn die Containerbreite unzureichend ist (z.B. 200px), muss geschrumpft werden. Bei unzureichendem Raum für das Schrumpfen werden flex-shrink und die Elementgrößen berücksichtigt. Der fehlende Raum wird proportional zu flex-shrink multipliziert mit der aktuellen Größe (nach flex-basis) auf die Elemente verteilt. Der Schrumpfalgorithmus ist etwas komplexer, aber die Grundidee ist, dass Elemente mit höherem flex-shrink oder größerer aktueller Größe stärker schrumpfen.

Es ist wichtig zu wissen, dass flex-basis, flex-grow und flex-shrink oft zusammen in der Kurzform flex verwendet werden. Zum Beispiel ist flex: 1 1 auto; gleichbedeutend mit flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priorität bei der Raumverteilung:

flex-basis: Legt die Anfangsgröße des Elements fest.
flex-grow: Verteilt den positiven freien Raum.
flex-shrink: Verteilt den negativen freien Raum (Schrumpfbedarf).

Wie funktionieren die Eigenschaften flex-grow und flex-shrink?