Flexbox Layout

LET OP! DEZE PAGINA IS NOG IN BEWERKING (Luc Claessens)

Het positioneren van containers in een pagina kan erg lastig zijn. Een eenvoudige nieuwe manier om dit netjes te doen is de flexbox layout. Voor een flexbox layout hoef je eigenlijk maar een paar dingen te doen:

Je moet een omsluitende container definieren, waarin je een aantal subcontainers opneemt
Je moet aangeven hoeveel ruimte elke subcontainer nodig heeft

Laten we beginnen met een eenvoudig voorbeeld. We gaan drie containers horizontaal op een rij zetten. Iedere container krijgt hierbij evenveel ruimte in de breedte.



.outer-container {
    display: flex;
    border: 1px solid black;
}
.inner-container {
    border: 1px solid red;
}

<div class="outer-container">
   <div class="inner-container">playstations</div>
   <div class="inner-container">auto onderdelen</div>
   <div class="inner-container">bananen</div>
</div>

Zie je hoe eenvoudig het is? We hoeven eigenlijk alleen voor de omvattende container (outer-container) flexboxing AAN te zetten.

Nu zijn alle inner-containers echter precies even breed en ze gebruiken bovendien niet de volledige ruimte van de outer-container. Vaak wil je dat wel

Je kunt dat aanpassen door iedere container een relatieve flexwaarde te geven. Het percentage van de totale breedte die een container zal innemen is gelijk aan de flexwaarde die jij de container geeft gedeeld door het totaal aan flexwaarden binnen de outer-container. Stel dat we de eerste en de laatste container ieder 25% van de breedte willen geven en de middelste container 50%:



.outer-container {
    display: flex;
    border: 1px solid black;
}

.inner-container-small {
    border: 1px solid blue;
    flex: 25;
}
  
.inner-container-large {
    border: 1px solid red;
    flex: 50;
}

<div class="outer-container">
   <div class="inner-container-small">playstations</div>
   <div class="inner-container-large">auto onderdelen</div>
   <div class="inner-container-small">bananen</div>
</div>

Merk op dat in de css geen % wordt gebruikt. Welke andere waarden voor 25 en 50 zou je kunnen gebruiken?

Er kan natuurlijk nog veel meer met flexboxen. Kijk eens op de volgende sites hiervoor: