Flexbox (uitlijning van elementen)

Met flexbox kunnen we blokken met code uitlijnen op onze pagina. Meestal gebruiken we daarvoor de div-tag.

In dit voorbeeld zullen 4 verschillende soorten uitlijning laten zien op een pagina regel.
flexbox

Voor dit voorbeeld is onderstaande code gebruikt.

<style>
    /* Let op de style komt natuurlijk in een stylesheet, dit is alleen als voorbeeld */
    body {
        margin: 0;
    }

    div > div { /* elke div in een div krijgt deze eigenschappen */
        background-color: blue;
        width: 60px;
        height: 40px;
    }

    .block {
        display: flex;
        gap: 20px; /* Ruimte tussen de blokken */
        margin: 10px; /* ruimte om het blok heen */
    }

    .start {
        justify-content: flex-start; /* zet alles links */
    }

    .end {
        justify-content: flex-end; /* zet alles rechts */
    }

    .center {
        justify-content: center; /*zet alles in het midden*/
    }

    .between {
        justify-content: space-between; /* vult de gehele ruimte op */
    }
</style>

<h3>display:flex; justify-content:flex-start; (class="block start)"</h3>
<div class="block start">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

<h3>display:flex; justify-content:flex-end; (class="block end)"</h3>
<div class="block end">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

<h3>display:flex; justify-content:flex-center; (class="block center)"</h3>
<div class="block center">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

<h3>display:flex; justify-content:space-between; (class="block between)"</h3>
<div class="block between">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Dus door een combinatie van display: flex; en justify-content: ...; kan je de div-elementen daarbinnen uitlijnen. (Dit hoeven overigens geen div-elementen te zijn. Het werkt bijna met elke HTML tag.