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

flex-grow bepaalt in hoeverre een element kan groeien bij beschikbare vrije ruimte in de container. Een waarde van 0 (standaard) betekent dat het element niet zal groeien. Positieve waarden geven de groeifactor aan ten opzichte van andere flex-elementen in dezelfde rij.

flex-shrink bepaalt in hoeverre een element kan krimpen bij gebrek aan vrije ruimte in de container. Een waarde van 1 (standaard) betekent dat het kan krimpen. Een waarde van 0 verbiedt krimp. Positieve waarden geven de krimpfactor aan ten opzichte van andere flex-elementen.

Laten we een voorbeeld bekijken:

<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; /* Breedte van de container */
}

.item {
  flex-basis: 100px; /* Basisgrootte van elk element */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Neemt 1 deel van de vrije ruimte in */
  flex-shrink: 0; /* Zal niet krimpen */
}

.item-2 {
  flex-grow: 2; /* Neemt 2 delen van de vrije ruimte in */
  flex-shrink: 1; /* Kan krimpen */
}

.item-3 {
  flex-grow: 1; /* Neemt 1 deel van de vrije ruimte in */
  flex-shrink: 1; /* Kan krimpen */
}

In dit geval is de totale basisgrootte van de elementen 300px (3 * 100px). De vrije ruimte is 100px (400px - 300px). Deze ruimte wordt verdeeld tussen de elementen 1, 2 en 3 in verhouding tot hun flex-grow: 1 + 2 + 1 = 4. Element 1 krijgt 1/4 * 100px = 25px extra ruimte. Element 2 krijgt 2/4 * 100px = 50px extra ruimte. Element 3 krijgt 1/4 * 100px = 25px extra ruimte.

De uiteindelijke afmetingen worden: Element 1: 100px + 25px = 125px Element 2: 100px + 50px = 150px Element 3: 100px + 25px = 125px

Als de breedte van de container onvoldoende is (bijvoorbeeld 200px), moet er worden ingekrompen. Bij gebrek aan ruimte voor het krimpen worden flex-shrink en de afmetingen van de elementen in overweging genomen. Het ontbrekende ruimte wordt proportioneel verdeeld voor het krimpen tussen de elementen met flex-shrink groter dan 0, in verhouding tot hun flex-shrink vermenigvuldigd met hun huidige grootte (na flex-basis). Het krimp-algoritme is iets complexer, maar het basisidee is dat elementen met een hogere flex-shrink of grotere huidige grootte sterker zullen krimpen.

Het is belangrijk om te onthouden dat flex-basis, flex-grow en flex-shrink vaak samen worden gebruikt als de korte eigenschap flex. Bijvoorbeeld, flex: 1 1 auto; is gelijk aan flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Prioriteit bij ruimteverdeling:

flex-basis: Stelt de initiële grootte van het element in.
flex-grow: Verdeelt de positieve vrije ruimte.
flex-shrink: Verdeelt de negatieve vrije ruimte (krimpbehoefte).

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