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

flex-grow en flex-shrink bepalen hoe elementen zich aanpassen in grootte binnen een flex-container, respectievelijk wanneer er vrije ruimte is of wanneer er onvoldoende ruimte is.

flex-grow - bepaalt de factor waarmee een element groter wordt wanneer er vrije ruimte in de container is. De standaardwaarde is 0 (het element groeit niet). Als meerdere elementen flex-grow groter dan 0 hebben, wordt de vrije ruimte proportioneel verdeeld op basis van hun flex-grow-waarden.

.item {
  flex-grow: 1; /* Het element gebruikt alle beschikbare vrije ruimte */
}

flex-shrink - bepaalt de factor waarmee een element kleiner wordt wanneer er onvoldoende ruimte in de container is. De standaardwaarde is 1 (het element krimpt proportioneel met andere krimpende elementen). Een waarde van 0 voorkomt dat het element krimpt.

.item {
  flex-shrink: 0; /* Het element zal niet krimpen */
}

Samen met flex-basis vormen ze de verkorte eigenschap flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Voorbeeld van gebruik:

<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; /* Voorbeeld van vaste breedte van de container */
}

.item {
  flex-basis: 100px; /* Basisgrootte van alle elementen */
}

.item-1 {
  flex-grow: 1; /* Item 1 gebruikt de vrije ruimte */
}

.item-2 {
  flex-shrink: 0; /* Item 2 zal niet krimpen */
}

Als de container breder is dan 200px (100px + 100px), neemt item-1 alle resterende vrije ruimte in beslag. Als de container al 200px is, behoudt item-2 zijn basisgrootte van 100px, en wordt item-1 gekrompen.