Hoe gebruik je flexbox voor het opmaken van elementen…

Flexbox (of Flexible Box Layout) is een CSS-module ontworpen voor het maken van flexibele lay-outs van elementen binnen een container, waardoor het gemakkelijk is om ruimte te verdelen en elementen uit te lijnen, zelfs als hun grootte onbekend of dynamisch verandert.

Het kernconcept van Flexbox is de flex-container en de flex-elementen.

Eigenschappen voor de Flex-container (display: flex;):

flex-direction: bepaalt de richting waarin de flex-elementen worden geplaatst (hoofd-as).
- row (standaard): horizontaal, van links naar rechts.
- row-reverse: horizontaal, van rechts naar links.
- column: verticaal, van boven naar beneden.
- column-reverse: verticaal, van onder naar boven.
flex-wrap: bepaalt of de flex-elementen naar een nieuwe regel worden overgebracht als ze niet op één regel passen.
- nowrap (standaard): alle elementen op één regel.
- wrap: worden overgebracht naar een nieuwe regel.
- wrap-reverse: overgebracht naar een nieuwe regel, maar in omgekeerde volgorde.
justify-content: uitlijning van flex-elementen langs de hoofd-as.
- flex-start (standaard): uitlijning aan het begin van de hoofd-as.
- flex-end: uitlijning aan het einde van de hoofd-as.
- center: uitlijning in het midden.
- space-between: gelijke verdeling met ruimte tussen de elementen.
- space-around: gelijke verdeling met ruimte rondom de elementen.
- space-evenly: gelijke verdeling met gelijke ruimte tussen en rondom de elementen.
align-items: uitlijning van de flex-elementen langs de dwars-as.
- stretch (standaard, als flex-elementen geen hoogte/breedte hebben): strekt de elementen uit over de dwars-as.
- flex-start: uitlijning aan het begin van de dwars-as.
- flex-end: uitlijning aan het einde van de dwars-as.
- center: uitlijning in het midden.
- baseline: uitlijning op de basislijn van de tekst.
align-content: uitlijning van de rijen flex-elementen langs de dwars-as, wanneer er meerdere rijen zijn (flex-wrap: wrap).
- stretch (standaard): strekt de rijen uit.
- flex-start: uitlijning aan het begin van de dwars-as.
- flex-end: uitlijning aan het einde van de dwars-as.
- center: uitlijning in het midden.
- space-between: gelijke verdeling met ruimte tussen de rijen.
- space-around: gelijke verdeling met ruimte rondom de rijen.
gap, row-gap, column-gap: bepaalt de tussenruimte tussen de flex-elementen.

.flex-container {
  display: flex; /* Flex-container maken */
  flex-direction: row; /* Horizontale richting */
  flex-wrap: wrap; /* Overgang naar nieuwe regel */
  justify-content: center; /* Centraal uitlijnen */
  align-items: center; /* Verticaal uitlijnen */
  gap: 10px; /* 10px tussenruimte */
}

Eigenschappen voor Flex-elementen (directe kinderen van de flex-container):

order: bepaalt de volgorde van het flex-element in de container (standaard 0). Elementen met een kleinere waarde komen eerder.
flex-grow: bepaalt hoe het flex-element kan groeien ten opzichte van andere elementen, door beschikbare ruimte op te nemen. Standaard 0.
flex-shrink: bepaalt hoe het flex-element kan krimpen bij gebrek aan ruimte. Standaard 1.
flex-basis: bepaalt de basisgrootte van het flex-element voordat vrije ruimte wordt verdeeld. Kan in px, %, rem, auto, etc. (standaard auto).
flex: verkorte eigenschap voor flex-grow, flex-shrink, flex-basis.
align-self: overschrijft de uitlijning langs de dwars-as voor dat specifieke element, gebaseerd op align-items. Kan dezelfde waarden aannemen.

.flex-item {
  order: 2; /* Dit element wordt tweede weergegeven */
  flex-grow: 1; /* Neemt de resterende ruimte in beslag */
  flex-shrink: 0; /* Zal niet krimpen */
  flex-basis: 100px; /* Basisgrootte 100px */
  align-self: flex-start; /* Uitlijning aan het begin */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

Flexbox maakt het mogelijk om verschillende lay-outs te creëren, van eenvoudige uitlijningen tot complexere responsieve structuren, door de verdeling van ruimte en uitlijning van elementen binnen een container te beheren.

Hoe gebruik je flexbox voor het opmaken van elementen op de pagina?