1. Basisconcepten van Flexbox

Flexbox, oftewel Flexible Box Layout, biedt een krachtige en flexibele manier om elementen binnen een HTML-container te ordenen. In dit hoofdstuk gaan we dieper in op de basisconcepten van Flexbox.

1.1 Introductie tot Flexbox

Flexbox is een layout-model in CSS dat is ontworpen om het bouwen van complexe lay-outs te vereenvoudigen. Dit model biedt uitgebreide controle over uitlijning, ruimteverdeling en de volgorde van elementen binnen een container, onafhankelijk van hun originele grootte.

1.2 Terminologie

Omdat Flexbox een module is en niet slechts één CSS-eigenschap omvat, bestaat het uit veel aspecten, waaronder een reeks van CSS-eigenschappen. Sommige van deze eigenschappen zijn bedoeld om te worden toegepast op het bovenliggende element, of de flex-container, terwijl andere bedoeld zijn voor de kind-elementen van deze container, de flex-items.

In traditionele HTML-opmaak wordt de plaatsing van elementen bepaald door de 'document flow', die elementen als 'blok' of 'inline' categoriseert, elk met hun eigen 'flowrichtingen'. In tegenstelling tot deze traditionele aanpak maakt Flexbox gebruik van 'flex-flowrichtingen'. Dit is een flexibele manier om elementen te positioneren en te oriënteren binnen een container. Deze richtingen worden bepaald door de flex-container eigenschappen en hebben invloed op hoe de flex-items (kinderen van de flex-container) worden gerangschikt. De figuur hieronder illustreert de basisprincipes van deze flex-lay-out.

Items worden gerangschikt langs de hoofdas (van Main Start tot Main End) of de kruisas (van Cross Start tot Cross End).

flex-box diagram
  • Main Axis (hoofdas): De hoofdas van een flex-container is de primaire as waarlangs flex-items worden gerangschikt. Deze as is niet per se horizontaal; het hangt af van de eigenschap 'flex-direction'. Als 'flex-direction' is ingesteld op 'row', loopt de hoofdas horizontaal, en bij 'column' verticaal.
  • Cross Axis (kruisas): De kruisas staat loodrecht op de hoofdas. De richting van de kruisas hangt af van de oriëntatie van de hoofdas. Als de hoofdas horizontaal is, dan is de kruisas verticaal. Als de hoofdas verticaal is, dan is de kruisas horizontaal. De kruisas bepaalt hoe items worden uitgelijnd en gerangschikt in de richting die loodrecht staat op de richting waarin ze worden opgesteld langs de hoofdas.

1.3 Basisprincipes van Flexbox

Laten we beginnen met de kernprincipes van Flexbox:

Flex-container

Flex-container: Het ouder-element (parent-element) dat de Flexbox-eigenschappen hanteert, waarop 'display: flex;' wordt toegepast. Dit element fungeert als de container waarin de flex-items worden geplaatst.

.container {
display: flex;
}

Flex-items

Flex-items: De kind-elementen (child elements) binnen de flex-container. Elk direct kind van de flex-container wordt een flex-item. Deze items zijn flexibel qua grootte en positie en kunnen groeien of krimpen om de beschikbare ruimte binnen de container op te vullen, met hun gedrag en uitlijning bepaald door verschillende Flexbox-eigenschappen.

.container {
flex-direction: row;
}
<div class="flex-container">
     <div class="flex-item">flex-item 1</div><div class="flex-item">flex-item 2</div>
</div>
flex-item 1
flex-item 2

Flex-direction

Flex-direction: Deze eigenschap bepaalt de hoofdasrichting van de flex-items binnen de container: horizontaal als 'row', verticaal als 'column', of de omgekeerde richtingen 'row-reverse' of 'column-reverse'.

.container {
    flex-direction: column;
}
flex-item 1
flex-item 2

Justify-content

Justify-content: Lijnt items uit langs de hoofdas. Voor een 'row' richting regelt het de horizontale uitlijning, en voor 'column' de verticale uitlijning.

De mogelijke waarden voor justify-content zijn:

  • center: Centreert items in de container langs de hoofdas.
  • flex-start: Lijnt items uit aan het begin van de container langs de hoofdas.
  • flex-end: Lijnt items uit aan het einde van de container langs de hoofdas.
  • space-between: Verdeelt extra ruimte gelijkmatig tussen de items, met de eerste item tegen het begin en het laatste tegen het einde van de container.
  • space-around: Verdeelt extra ruimte gelijkmatig rond de items, met de helft van de ruimte voor het eerste en laatste item.
.container-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Item 1
Item 2
Item 1
Item 2

Align-items

Align-items: Beïnvloedt de uitlijning van items langs de dwarsas, die loodrecht staat op de hoofdas. Bij een 'row' richting regelt het de verticale uitlijning, en bij 'column' de horizontale uitlijning.

De mogelijke waarden voor align-items zijn:

  • center: Centreert items in de container langs de dwarsas.
  • flex-start: Lijnt items uit aan het begin van de container langs de dwarsas.
  • flex-end: Lijnt items uit aan het einde van de container langs de dwarsas.
  • baseline: Lijnt items uit langs hun basislijn, wat betekent dat de tekst binnen de items visueel is uitgelijnd.
  • stretch: Rekt items uit om de container te vullen, tenzij ze een expliciete hoogte (of breedte bij een column richting) hebben.
.container-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.container-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
Item 1
Item 2
Item 1
Item 2

Align-content

Beschrijving: De "align-content" eigenschap wordt gebruikt om de flex-items samen binnen de flex-container uit te lijnen wanneer er extra ruimte is op de dwarsas. Deze eigenschap bepaalt hoe rijen of kolommen van flex-items zich positioneren langs de dwarsas van de container. Dit is verticaal bij gebruik van 'flex-direction: row' en horizontaal bij 'flex-direction: column'.

Belangrijk: De 'align-content' eigenschap is alleen van invloed wanneer er meerdere rijen of kolommen van flex-items in de container aanwezig zijn. Als er slechts één rij of kolom van flex-items is, heeft deze eigenschap geen effect.

De mogelijke waarden voor "align-content" zijn:

  • start: Lijnt de flex-items samen uit aan de start (bovenkant) van de container. Dit is de standaardinstelling in browsers.
  • end: Lijnt de flex-items samen uit aan de onderkant van de container.
  • center: Centreert de flex-items samen binnen de container.
  • between: Verdeelt de flex-items samen gelijkmatig met ruimte tussen de items, maar niet aan de boven- of onderkant.
  • around: Verdeelt de flex-items samen gelijkmatig met ruimte rondom elk item.
  • stretch: Rekt de flex-items samen uit zodat ze de volledige hoogte van de container innemen, resulterend in een gelijkmatige verdeling over de beschikbare ruimte.

.align-content-example {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end; /* Lijnt de flex-lijnen uit onderaan de container */
}

.align-content-item {
    flex: 1;
    height: 100px;
    padding: 10px;
    margin: 5px;
    background-color: lightblue;
}
Item 1
Item 2
Item 3

2.2 Flex-wrap & order

Flexbox biedt geavanceerde controle over hoe items zich gedragen als de ruimte beperkt is. In dit hoofdstuk gaan we dieper in op flex-wrap en order.

Flex-wrap

Flex-wrap is essentieel om te bepalen hoe items zich gedragen wanneer ze niet allemaal in één rij passen.

  • Eigenschappen en voorbeelden: 
    
.container-nowrap {
    display: flex;
    flex-wrap: nowrap; /* Alle items blijven op één lijn (standaard) */
}

.container-wrap {
    display: flex;
    flex-wrap: wrap; /* Items gaan naar een nieuwe regel als er niet genoeg ruimte is */
}

.container-wrap-reverse {
    display: flex;
    flex-wrap: wrap-reverse; /* Items gaan naar een nieuwe regel en de volgorde wordt omgekeerd */
}
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3
    Item 1
    Item 2
    Item 3

Gap

De "gap" eigenschap wordt gebruikt om de ruimte tussen flex-items binnen een flex-container aan te passen. Deze eigenschap wordt vaak gebruikt om marge of ruimte tussen de items toe te voegen, waardoor de lay-out er mooier uitziet.

Eigenschap en Voorbeeld:


.container {
    display: flex;
    gap: 20px; /* Voegt 20 pixels ruimte toe tussen de flex-items */
}

Met de "gap" eigenschap kunt u de afstand tussen items op zowel de hoofdas als de dwarsas van de flex-container regelen. Het is een handige manier om witruimte toe te voegen en de visuele uitlijning van uw lay-out te verbeteren.

Let op dat de "gap" eigenschap alleen van toepassing is op de afstand tussen items en niet op de ruimte tussen de items en de rand van de flex-container. Als u ruimte aan de randen wilt toevoegen, kunt u padding of marges gebruiken op de flex-items zelf.

De "gap" eigenschap is een handige toevoeging aan Flexbox om uw lay-outs verder aan te passen en te verfijnen.

CSS eigenschappen flex-items

Order

Met order kun je de volgorde van flex-items aanpassen, wat erg handig kan zijn voor responsieve lay-outs.

  • Eigenschappen en voorbeelden: 
    
.container {
    display: flex;
}

.item {
    padding: 10px;
    border: 1px solid black;
    margin: 15px; /* Verhoogde marge */
}

.item1 {
    order: 0; /* Standaard */
}

.item2 {
    order: 2; /* Verplaatst naar het einde */
}

.item3 {
    order: -1; /* Verplaatst naar het begin */
}
    Item 1 (order: 0)
    Item 2 (order: 2)
    Item 3 (order: -1)

2.3 Flex-grow, Flex-shrink & Flex-basis

Deze eigenschappen geven ons fijne controle over hoe items groeien en krimpen.

Flex-grow

Bepaalt hoeveel een item kan groeien in verhouding tot de rest.

Mogelijke Waarden

  • 0 (standaard): Het flex-item zal niet groeien, ongeacht hoeveel extra ruimte er in de flex-container is.
  • Een positief getal: Bijvoorbeeld flex-grow: 1; of flex-grow: 2;. Dit bepaalt de groeifactor van het flex-item. Hoe hoger het getal, hoe meer dat specifieke item zal groeien ten opzichte van de andere items in de flex-container.

Hoe het werkt

flex-grow wordt gebruikt wanneer er meer ruimte beschikbaar is in de flex-container dan nodig is om alle flex-items op hun basisgrootte te passen. flex-grow bepaalt hoe deze extra ruimte wordt verdeeld onder de flex-items.

  • Eigenschappen en Voorbeelden: 
    
.container {
    display: flex;
    border: 1px solid black;
    padding: 10px;
    width: 100%; /* Zorgt ervoor dat de container de volledige breedte inneemt */
}

.item {
    border: 1px solid grey;
    margin: 5px;
    padding: 10px;
    min-width: 50px; /* Stelt een minimale breedte in voor elk item */
}

.item1 {
    flex-grow: 0; /* Standaard: geen groei */
}

.item2 {
    flex-grow: 2; /* Laat het item meer ruimte innemen */
}
    Item 1 (flex-grow: 0)
    Item 2 (flex-grow: 2)

Flex-shrink

Definieert hoe een item kan krimpen als er niet genoeg ruimte is.

Mogelijke waarden

  • 0: Een flex-shrink waarde van 0 betekent dat het flex-item niet zal krimpen, zelfs als er niet genoeg ruimte is in de flex-container.
  • Een positief getal (standaard is 1): Deze waarde bepaalt hoe het item zal krimpen ten opzichte van andere items in de container. Een hoger getal betekent dat het item meer zal krimpen. Bijvoorbeeld, een item met flex-shrink: 2; zal twee keer zoveel krimpen als een item met flex-shrink: 1; in dezelfde container.

Eigenschappen en voorbeelden


.container {
    display: flex;
    border: 1px solid black;
    padding: 10px;
}

.item {
    border: 1px solid grey;
    margin: 5px;
    padding: 10px;
    min-width: 50px;
    width: 100px; /* Standaardbreedte */
}

.item-shrink {
    flex-shrink: 1; /* Item kan krimpen */
}

.item-no-shrink {
    flex-shrink: 0; /* Voorkomt dat het item krimpt */
}
Shrinkable
Non-Shrinkable

Flex-basis

De initiële grootte van een item voordat het groeit of krimpt.

Mogelijke waarden

  • auto (standaard): De grootte van het item wordt bepaald door zijn inhoud. Dit betekent dat de initiële grootte van het item afhankelijk is van de grootte van de inhoud die erin zit.
  • lengte-eenheid (zoals px, em, %, etc.): Je kunt een specifieke grootte toewijzen aan een item met behulp van standaardlengte-eenheden. Bijvoorbeeld, flex-basis: 20em; of flex-basis: 50%;. Dit stelt de initiële grootte van het item in op de gespecificeerde waarde.
  • 0: Dit stelt de basisgrootte van het item in op 0, waardoor het groeit of krimpt vanuit een grootte van nul.

Eigenschappen en voorbeelden


.container {
    display: flex;
    border: 1px solid black;
    padding: 10px;
}

.item {
    border: 1px solid grey;
    margin: 5px;
    padding: 10px;
}

.item-auto {
    flex-basis: auto; /* Grootte gebaseerd op de inhoud */
}

.item-fixed {
    flex-basis: 50%; /* Specifieke grootte */
}
Auto Basis (Grootte gebaseerd op de inhoud)
50% Basis

Flex shorthand

De flex shorthand eigenschap in CSS is een compacte manier om de flex-grow, flex-shrink, en flex-basis eigenschappen in één verklaring te combineren.

Mogelijke waarden

  • flex-grow: Een getal dat bepaalt hoeveel het item zal groeien ten opzichte van de rest in de flex-container.
  • flex-shrink: Een getal dat bepaalt hoe het item zal krimpen in verhouding tot anderen als er niet genoeg ruimte is.
  • flex-basis: De initiële grootte van het item voordat flexibele aanpassingen worden toegepast. Dit kan een lengte-eenheid of een percentage zijn.

De flex shorthand laat je toe om één, twee, of alle drie waarden te specificeren. Niet gespecificeerde waarden nemen hun standaardwaarde aan.

Voorbeelden en gebruik


.container {
    display: flex;
    border: 1px solid black;
    padding: 10px;
}

.item {
    border: 1px solid grey;
    margin: 5px;
    padding: 10px;
}

.item1 {
    flex: 1; /* gelijk aan flex: 1 1 0%; */
}

.item2 {
    flex: 2 2 50%; /* Groeit en krimpt tweemaal sneller dan item1, met een basis van 50% */
}
Flex 1
Flex 2 2 50%

Align-self

Maakt individuele uitlijning mogelijk voor elk flex-item binnen een flex-container.

Mogelijke waarden

  • auto (standaard): De uitlijning van het item volgt de 'align-items' instelling van de container.
  • flex-start: Plaatst het item aan het begin van de dwarsas.
  • flex-end: Plaatst het item aan het einde van de dwarsas.
  • center: Centreert het item langs de dwarsas.
  • baseline: Lijnt het item uit op de basislijn met de andere items in de container.
  • stretch: Rekt het item uit om de volledige dwarsas van de container te vullen, mits er geen hoogte of breedte is ingesteld.

Werking

align-self stelt je in staat om de positie van een enkel flex-item binnen zijn container te wijzigen. Dit gebeurt langs de dwarsas, los van de algemene uitlijningsregels die met 'align-items' voor de gehele container zijn ingesteld.

  • Eigenschappen en Voorbeelden: 
    
.container {
    display: flex;
    height: 200px;
    border: 1px solid black;
}

.flex-item {
width: 50px;
margin: 5px;
background-color: lightblue;
text-align: center;
line-height: 50px;
}

.item1 {
align-self: flex-start;
}

.item2 {
align-self: center;
}

.item3 {
align-self: flex-end;
}

.item4 {
align-self: stretch;
}
    Start
    Center
    End
    Stretch

Samenvatting

Deze eigenschappen worden toegepast op de flex-container (het ouder-element).

  • display: Kan ingesteld worden op 'flex' of 'inline-flex' om van een element een flex-container te maken.
  • flex-direction: Bepaalt de hoofdas van de container. Mogelijke waarden zijn 'row', 'row-reverse', 'column', 'column-reverse'.
  • flex-wrap: Beheert of flex-items moeten overgaan naar de volgende regel of niet. Mogelijke waarden zijn 'nowrap', 'wrap', 'wrap-reverse'.
  • flex-flow: Een shorthand eigenschap die flex-direction en flex-wrap combineert.
  • justify-content: Lijnt flex-items uit langs de hoofdas. Mogelijke waarden zijn 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'.
  • align-items: Lijnt flex-items uit langs de dwarsas. Mogelijke waarden zijn 'stretch', 'center', 'flex-start', 'flex-end', 'baseline'.
  • align-content: Lijnt flex-lijnen uit binnen de flex-container als er extra ruimte op de dwarsas is. Mogelijke waarden zijn 'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'.

Flex-Item eigenschappen

Deze eigenschappen worden toegepast op de flex-items (de kinderen van de flex-container).

  • order: Deze eigenschap beïnvloedt de volgorde waarin flex-items verschijnen binnen de flex-container. Het kan worden ingesteld op een numerieke waarde om de volgorde van items te veranderen. Items met een lagere order-waarde verschijnen eerder, terwijl items met een hogere order-waarde later verschijnen.
  • flex-grow: Bepaalt het vermogen van een flex-item om te groeien als er extra ruimte beschikbaar is. Het is een numerieke waarde die de verhouding van groei aangeeft in vergelijking met andere flex-items binnen dezelfde container. Hoe hoger de flex-grow-waarde, hoe meer ruimte het item zal innemen bij groei.
  • flex-shrink: Deze eigenschap bepaalt het vermogen van een flex-item om te krimpen als er niet genoeg ruimte is. Het is een numerieke waarde die de verhouding van krimp aangeeft in vergelijking met andere flex-items binnen dezelfde container. Een flex-item met een hogere flex-shrink-waarde zal meer krimpen dan andere items als er ruimtetekort is.
  • flex-basis: Stelt de initiële grootte van een flex-item in voordat de resterende ruimte wordt verdeeld. Het kan worden ingesteld als een lengte (bijv. '100px') of een percentage (bijv. '50%'). Dit bepaalt hoeveel ruimte (bijvoorbeeld "0" om de volledige beschikbare ruimte in te nemen) het item aanvankelijk inneemt voordat flex-grow en flex-shrink worden toegepast.
  • flex: Dit is een shorthand eigenschap die flex-grow, flex-shrink en flex-basis combineert in één regel. Bijvoorbeeld, "flex: 1 1 0" betekent dat het item kan groeien (flex-grow: 1), kan krimpen (flex-shrink: 1), en een initiële grootte van 0 heeft (flex-basis: 0).
  • align-self: Deze eigenschap staat een flex-item toe om zichzelf anders uit te lijnen dan de rest van de items binnen de flex-container, met betrekking tot de dwarsas. Mogelijke waarden zijn 'auto' (gebruik de standaard uitlijning), 'flex-start' (begin van de dwarsas), 'flex-end' (einde van de dwarsas), 'center' (gecentreerd op de dwarsas), 'baseline' (uitgelijnd op de basislijn), en 'stretch' (rek uit om de dwarsas van de container te vullen).

Download deze poster met een overzicht van alle flexbox-eigenschappen.