Hoe werken de eigenschappen flex-grow en flex-shrink…

flex-grow en flex-shrink regelen hoe flex-elementen de vrije ruimte binnen de flex-container verdelen.

flex-grow:

Bepaalt welk deel van de beschikbare vrije ruimte in de flex-container door het element wordt ingenomen, als er vrije ruimte is.
Standaard flex-grow: 0, wat betekent dat het element niet groeit.
Waarde - niet-negatief getal.
Als meerdere elementen flex-grow groter dan 0 hebben, wordt de vrije ruimte tussen hen verdeeld in verhouding tot hun flex-grow-waarden.

flex-shrink:

Bepaalt hoeveel het element zal samentrekken als de beschikbare ruimte in de flex-container kleiner is dan de som van de basisgroottes van alle flex-elementen.
Standaard flex-shrink: 1, wat betekent dat het element kan samentrekken.
Waarde - niet-negatief getal.
Hoe groter de waarde van flex-shrink, hoe sterker het element zal samentrekken in vergelijking met andere elementen met een kleinere waarde.
Bij het samentrekken wordt rekening gehouden met de basisbreedte van het element (flex-basis of width).

Voorbeeld:

.container {
  display: flex;
  width: 500px;
  /* Totale breedte van de container */
}

.item {
  flex-basis: 100px;
  /* Basisbreedte van elk element */
}

.item:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Standaardwaarden */
}

.item:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Wordt niet ingekort */
}

.item:nth-child(3) {
  flex-grow: 0; /* Groeit niet */
  flex-shrink: 2; /* Wordt sterker ingekort */
}

Als de som van de basisbreedtes (300px) kleiner is dan de breedte van de container (500px), wordt de resterende ruimte (200px) verdeeld tussen het eerste en tweede element in de verhouding flex-grow 1:2.

Als de som van de basisbreedtes groter is dan de breedte van de container, worden de elementen ingekort volgens hun flex-shrink-waarden en basisgroottes. Het element met flex-shrink: 0 wordt niet ingekort.

Hoe werken de eigenschappen flex-grow en flex-shrink?