Hoe kunt u de afmetingen van elementen die flexbox…

Het is mogelijk om de grootte van elementen in flexbox flexibel aan te passen met behulp van de eigenschappen flex-grow, flex-shrink en flex-basis.

flex-grow: Bepaalt in hoeverre een element kan uitrekken, door de vrije ruimte in de container op te nemen. De standaardwaarde is 0 (rekent niet uit). Een hogere waarde betekent een grotere uitrekkingscoëfficiënt ten opzichte van andere elementen.
flex-shrink: Bepaalt in hoeverre een element kan krimpen bij gebrek aan vrije ruimte. De standaardwaarde is 1 (krimpt). Een hogere waarde betekent een grotere krimpcoëfficiënt.
flex-basis: Bepaalt de basisgrootte van het element voordat de vrije ruimte wordt verdeeld. Kan worden ingesteld als een vaste waarde (px, %, rem) of een sleutelwoord (auto, content).

Deze drie eigenschappen worden vaak gecombineerd in de verkorte eigenschap flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Voorbeelden van gebruik:

/* Het element neemt alle beschikbare ruimte in beslag */
.flex-item {
  flex-grow: 1;
}

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

/* Het element heeft een basisgrootte van 100px en wordt groter als er ruimte is */
.flex-item {
  flex: 1 1 100px;
}

/* Het element heeft een basisgrootte die wordt bepaald door de inhoud en kan krimpen */
.flex-item {
  flex: 0 1 auto; /* Gelijk aan `flex: initial;` */
}

/* Het element groeit niet, krimpt niet en heeft een basisgrootte die wordt bepaald door de inhoud */
.flex-item {
  flex: 0 0 auto; /* Gelijk aan `flex: none;` */
}

/* Het element groeit, krimpt en heeft een basisgrootte van 0 (handig voor het maken van elementen met gelijke breedte) */
.flex-item {
  flex: 1 1 0; /* Gelijk aan `flex: auto;` */
}

Het gebruik van deze eigenschappen maakt het mogelijk om het gedrag van elementen binnen een flex-container nauwkeurig te regelen bij het wijzigen van de schermgrootte of inhoud.

Hoe kunt u de afmetingen van elementen die flexbox gebruiken flexibel aanpassen?