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

flex-grow und flex-shrink bestimmen, wie Elemente sich innerhalb eines Flex-Containers anpassen, wenn Platz vorhanden ist oder fehlt.

flex-grow - bestimmt den Koeffizienten, nach dem ein Element wachsen soll, wenn im Container freier Raum vorhanden ist. Der Standardwert ist 0 (das Element dehnt sich nicht aus). Wenn mehrere Elemente flex-grow größer als 0 haben, wird der freie Raum proportional zu ihren flex-grow-Werten verteilt.

.item {
  flex-grow: 1; /* Das Element nutzt den verfügbaren freien Raum */
}

flex-shrink - bestimmt den Koeffizienten, nach dem ein Element schrumpfen soll, wenn im Container nicht genug Platz ist. Der Standardwert ist 1 (das Element schrumpft proportional zu anderen schrumpfenden Elementen). Ein Wert von 0 verhindert das Schrumpfen des Elements.

.item {
  flex-shrink: 0; /* Das Element wird nicht schrumpfen */
}

Zusammen mit flex-basis bilden sie die Kurzform-Eigenschaft flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Beispiel:

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

.container {
  display: flex;
  width: 400px; /* Beispiel für eine feste Containerbreite */
}

.item {
  flex-basis: 100px; /* Grundgröße aller Elemente */
}

.item-1 {
  flex-grow: 1; /* Item 1 nutzt den freien Raum */
}

.item-2 {
  flex-shrink: 0; /* Item 2 wird nicht schrumpfen */
}

Wenn der Container breiter als 200px ist (100px + 100px), nimmt item-1 den restlichen freien Raum ein. Wenn der Container bereits 200px misst, behält item-2 seine Grundgröße von 100px bei, und item-1 wird schrumpfen.