Flexbox

Je wilt dat een pagina zich aanpast aan de grote van het scherm. Dus op een telefoon moet je website er ook nog prettig uitzien. Het eerste is dus dat de grote van de blokken zich aanpassen aan het scherm. Daarvoor kan je goed gebruik maken van een flexbox. Hieronder staat een voorbeeld van hou je dat kan doen.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;
            }

            .flex-container {
                display: flex;
            }

            .flex-container div {
                flex-grow: 1;
                text-align: center;
            }

            .flex-container div img{
                flex-grow: 1;
                text-align: center;
                width: 100%;
            }
        </style>

    </head>
    <body>
        <div class="flex-container">
            <div><img src="https://picsum.photos/200/100"></div>
            <div><img src="https://picsum.photos/200/100"></div>
            <div><img src="https://picsum.photos/200/100"></div>
        </div>
    </body>
</html>

Bekijk het resultaat

Meer uitleg over de flexbox: link

Een flexbox bestaat dus uit een container en een aantal items.


<div class="flex-container">
     <div class="flex-item"></div>
     <div class="flex-item"></div>
     <div class="flex-item"></div>
</div>

Voor de container heb je minimaal de volgende css nodig:


.flex-container {
    display: flex;
}

Verder heb je nog een aantal opties:


.flex-container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    flex-flow: column wrap;
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
    align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Voor de items is de flex-grow zoals ik in bovenstaand voorbeeld heb gebruikt wel belangrijk. Deze zorgt ervoor dat de div's zich ook daadwerkelijk als in een grid gedragen. Dus dat ze volledig uitlijnen op de pagina. Je kan een blok groter maken door deze waarde te verhogen. Andere mogelijkheden zijn:


.flex-item {
    order: 5;
    flex-grow: 4;
    flex-shrink: 3;
    flex-basis:  | auto;
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Probeer hieronder maar eens uit:

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

Sections Lesvoorbeelden html en css