Flexbox en grid, eindelijk begrijpen

justify-content of align-items? 1fr of 33%? Flexbox en grid zijn de krachtigste stukken CSS, en de stukken waarover mensen het vaakst twijfelen.

In Lurndo zie je wat elke eigenschap doet. Je zet foodtrucks op hun standplaats en tenten op hun plek op de camping, en de items schuiven mee terwijl je typt.

Begin gratis met de eerste lesGeen account nodig · een les duurt een paar minuten

Waarom Lurndo bij jou past

Je ziet de assen
De inspector tekent de hoofdas en de dwarsas van flexbox, en de genummerde lijnen en vlakken van grid. Zo zie je waarom een item ergens terechtkomt.
Puzzels die oplopen
Elke doelplaats staat als stippellijn met een nummer in de pagina. Je zet de items op hun plaats met een paar regels op de container.
Geen omweg met vaste maten
Een item met een vaste margin op zijn plaats duwen lukt niet. De controle probeert je code ook met een item meer of een andere volgorde.
Van puzzel tot echte pagina
Je eindigt met een menubalk, kaarten op een rij en een volledige paginalayout die op elk scherm past.

Je eerste flexbox

Zet de foodtrucks op het plein naast elkaar, verdeeld over de hele breedte: de eerste links, de laatste rechts.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Wielen &amp; Smullen</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="truck.svg" alt="" width="40" height="40">11    <h1>Wielen &amp; Smullen</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="plan.html">Plan</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Foodtruckfestival op de Grote Markt van Tienen, 14 en 15 juni.</p>21    <section class="plein">22      <div class="truck friet">Friet</div>23      <div class="truck taco">Taco's</div>24      <div class="truck ijs">IJs</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="kaarten">28      <article class="kaart">29        <h2>Zaterdag</h2>30        <p>Van 11 tot 23 uur, met livemuziek vanaf 20 uur.</p>31      </article>32      <article class="kaart">33        <h2>Zondag</h2>34        <p>Van 11 tot 20 uur, met een kinderhoek.</p>35      </article>36      <article class="kaart">37        <h2>Toegang</h2>38        <p>Gratis. Je betaalt per hapje.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Grote Markt, 3300 Tienen</p>44  </footer>45</body>46</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.plein {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.plein.hoog {38  height: 200px;39}40.plein.smal {41  max-width: 250px;42}43/* Een luifel met strepen en twee wielen: alleen voor de sier. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.friet {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.wafel {85  background-color: #9c6644;86}87.ijs {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soep {101  background-color: #588157;102}103.kaart {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.kaart h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Zo oefen je

Module 6 gaat over flexbox, module 7 over grid, elk in negen lessen. Ken je de basis van CSS nog niet, begin dan bij de eerste modules.

Vastgelopen? Vraag het Lurnie

Lurnie is je AI-coach in elke les. Stel je vraag tijdens of na een oefening en krijg meteen uitleg op jouw niveau.

Tijdens of na elke oefeningLurnie weet welke les en oefening je doet. Vraag waarom iets werkt, wat een fout betekent of hoe het ook anders kan.
Eigen voorbeelden, nooit de oplossingLurnie legt uit met een voorbeeld op andere data en helpt je verder met een denkvraag. Zo vind je de oplossing zelf, en dat onthoud je.
Je gesprekken blijven bewaardLees later terug wat Lurnie uitlegde. Je gesprekken staan per cursus bij je account.

Lurnie hoort bij premium, met 30 vragen per dag.Bekijk premium

LurnieJe coach voor HTML & CSS

Waarom wordt mijn link niet rood? Mijn regel staat er toch?

Waarschijnlijk wint een andere regel. Kiezen twee regels hetzelfde element, dan wint de specifiekste: nav a gaat voor op a, ook als a lager in je bestand staat. Pas bij een gelijke stand wint de laatste.

Zoek dus een selector die je link preciezer aanwijst dan de jouwe. Welke vind je?

Nog 29 van 30 vragen vandaagLurnie kan zich vergissen.

Een voorbeeld van een gesprek met Lurnie

Veelgestelde vragen

Wat is het verschil tussen flexbox en grid?

Flexbox zet items op één lijn, zoals een menubalk of kaarten op een rij. Grid verdeelt een vlak in rijen en kolommen tegelijk, zoals een fotogalerij of een volledige pagina. Module 7 heeft een les over wanneer je welke kiest.

Moet ik eerst de rest van CSS kennen?

Je moet weten hoe een CSS-regel eruitziet en wat een class is. Dat leer je in module 2, die gratis is.

Zijn de flexbox- en gridmodules gratis?

Modules 1 tot 3 zijn gratis. Flexbox en grid horen bij premium, samen met de puzzels en de dagelijkse uitdagingen van die modules.

Werkt het ook op een gsm?

Ja. Elke puzzel wordt gecontroleerd op een gsm en op een groot scherm, en je kan op beide oefenen.

Zet de eerste truck op zijn plaats

Je eerste flexbox staat binnen een minuut. Geen account, geen installatie.

Begin gratis met de eerste les

Flexbox en grid, eindelijk begrijpen

justify-content of align-items? 1fr of 33%? Flexbox en grid zijn de krachtigste stukken CSS, en de stukken waarover mensen het vaakst twijfelen.

In Lurndo zie je wat elke eigenschap doet. Je zet foodtrucks op hun standplaats en tenten op hun plek op de camping, en de items schuiven mee terwijl je typt.

Begin gratis met de eerste lesGeen account nodig · een les duurt een paar minuten

Waarom Lurndo bij jou past

Je ziet de assen

De inspector tekent de hoofdas en de dwarsas van flexbox, en de genummerde lijnen en vlakken van grid. Zo zie je waarom een item ergens terechtkomt.

Puzzels die oplopen

Elke doelplaats staat als stippellijn met een nummer in de pagina. Je zet de items op hun plaats met een paar regels op de container.

Geen omweg met vaste maten

Een item met een vaste margin op zijn plaats duwen lukt niet. De controle probeert je code ook met een item meer of een andere volgorde.

Van puzzel tot echte pagina

Je eindigt met een menubalk, kaarten op een rij en een volledige paginalayout die op elk scherm past.