Content rechtvaardigen en items uitlijnen
Positioneer children langs de hoofdas met justify-* en langs de dwarsas met items-* om veelgebruikte lay-outpatronen te realiseren.
Content rechtvaardigen en items uitlijnen is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Twee assen voor flex-uitlijning
Flexbox-uitlijning werkt op twee loodrechte assen. De hoofdas loopt in de richting van flex-row (horizontaal) of flex-col (verticaal). De dwarsas staat loodrecht op de hoofdas. justify-* regelt de uitlijning langs de hoofdas. items-* regelt de uitlijning langs de dwarsas. Het begrijpen van dit onderscheid is de sleutel tot het beheersen van flex-layouts.
justify-content: positionering op de hoofdas
De justify-*-utilities komen overeen met CSS justify-content. In een flexrij regelen ze de horizontale positionering van de groep items. justify-start groepeert items links (standaard). justify-end groepeert ze rechts. justify-center centreert de groep. justify-between verdeelt items met gelijke ruimte ertussen. justify-around voegt gelijke ruimte rond elk item toe. justify-evenly verdeelt de ruimte gelijkmatig, inclusief aan de randen.
<div class="flex justify-start gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-center gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-between bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-end gap-2 bg-gray-100 p-4"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>justify-between: de ruimteverdeler
justify-between is een van de meest gebruikte flex-utilities. De eerste item wordt aan het begin van de container geplaatst, het laatste aan het einde en de overige items worden verdeeld met gelijke ruimte ertussen. Dit is het standaardpatroon voor navbars (logo links, links rechts), cards (pictogram links, actie rechts) en elk component waarin items de volledige breedte moeten benutten met ruimte ertussen.
<!-- Navbar with justify-between -->
<div class="flex items-center justify-between px-6 py-4 bg-white shadow">
<span class="font-bold text-indigo-600">Logo</span>
<button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded">Sign Up</button>
</div>
<!-- Card footer with actions -->
<div class="flex items-center justify-between pt-4 border-t">
<span class="text-sm text-gray-500">Last updated: Today</span>
<button class="text-indigo-600 text-sm font-medium">Edit</button>
</div>align-items: positionering op de dwarsas
De items-*-utilities komen overeen met CSS align-items en regelen hoe items op de dwarsas worden geplaatst. In een flexrij regelt dit de verticale uitlijning. items-start lijnt uit aan de bovenkant. items-end lijnt uit aan de onderkant. items-center centreert alle items verticaal. items-stretch (standaard) rekt items uit om de hoogte van de container te vullen. items-baseline lijnt tekstbaselines uit.
<!-- All four items-* values demonstrated in a row -->
<div class="flex items-start h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-blue-400 p-2 text-sm">Start</div>
</div>
<div class="flex items-center h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-green-400 p-2 text-sm">Center</div>
</div>
<div class="flex items-end h-24 gap-4 bg-gray-100 p-4">
<div class="bg-red-400 p-2 text-sm">End</div>
</div>items-center: de meest gebruikte uitlijning
items-center wordt in vrijwel elke flexrij gebruikt, omdat hiermee alle kinderen verticaal worden gecentreerd, ongeacht hun afzonderlijke hoogtes. Pictogrammen, tekst en knoppen — ook wanneer ze verschillende afmetingen hebben — worden allemaal uitgelijnd op hun verticale middelpunt. Hierdoor zien navbars, lijstitems en card-voetteksten er verzorgd uit zonder handmatige hoogteaanpassingen.
<!-- Icon + text + badge: all different heights, all centered -->
<div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold">
JD
</div>
<div>
<p class="font-medium text-gray-900">Jane Doe</p>
<p class="text-xs text-gray-500">Product Designer</p>
</div>
<span class="ml-auto bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full">
Active
</span>
</div>items-baseline voor tekstuitlijning
items-baseline lijnt items zo uit dat hun tekstbaselines (de onderkant van hoofdletters) op één lijn staan. Dit is handig wanneer je verschillende tekengroottes in een rij combineert — bijvoorbeeld een groot prijsgetal naast een kleiner valutateken of een kleiner eenheidslabel. Zonder baseline-uitlijning zien de verschillende groottes er onrustig uit; hiermee vormen ze een visueel samenhangende groep.
<!-- Price with currency and period aligned on baseline -->
<div class="flex items-baseline gap-1">
<span class="text-sm font-medium text-gray-500">$</span>
<span class="text-4xl font-extrabold text-gray-900">49</span>
<span class="text-sm font-medium text-gray-500">/month</span>
</div>justify en items combineren
De kracht zit in het combineren van justify-* en items-*. Het klassieke flex items-center justify-center centreert de inhoud tegelijk op beide assen. flex items-center justify-between verdeelt items horizontaal en houdt ze verticaal gecentreerd — het standaardpatroon voor navbars. Zie dit als het tegelijk besturen van twee onafhankelijke assen.
<!-- Perfect vertical and horizontal centering -->
<div class="min-h-screen flex items-center justify-center">
<p class="text-2xl font-bold">Dead center</p>
</div>
<!-- Navbar pattern -->
<nav class="flex items-center justify-between px-8 h-16 bg-white border-b">
<span class="font-bold">Brand</span>
<button class="text-sm font-medium text-indigo-600">Login</button>
</nav>align-self: individuele overschrijving van de uitlijning
Terwijl items-* alle kinderen op dezelfde manier uitlijnt, overschrijven self-*-utilities de uitlijning voor één flex-item. self-start, self-end, self-center, self-stretch en self-baseline werken precies zoals hun items-*-tegenhangers, maar worden toegepast op het element waarop ze staan in plaats van op alle kinderen. Gebruik dit om één item aan de groepsuitlijning te onttrekken.
<!-- Most items centered, but one aligned to the top -->
<div class="flex items-center gap-4 bg-gray-100 p-4 h-24">
<div class="self-start bg-indigo-400 p-3">Top</div>
<div class="bg-green-400 p-3">Middle</div>
<div class="bg-blue-400 p-3">Middle</div>
</div>justify-items in Grid (niet in Flex)
Verwar justify-content (voor flexcontainers) niet met justify-items (voor gridcontainers). In Tailwind regelt justify-* justify-content op flexcontainers. Voor CSS Grid gebruik je justify-items-* en place-items-*. Deze regelen hoe gridkinderen binnen hun afzonderlijke gridcellen worden geplaatst, niet hoe de gridsporen worden verdeeld.
<!-- Flex: justify-between distributes the group -->
<div class="flex justify-between">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Grid: justify-items centers each item within its cell -->
<div class="grid grid-cols-3 justify-items-center">
<div>A</div><div>B</div><div>C</div>
</div>align-content voor flex met meerdere regels
Wanneer flex-items over meerdere regels worden gewrapt (met flex-wrap), regelen content-*-utilities de uitlijning van de volledige groep regels. content-center centreert alle regels als groep in de container. content-between verdeelt de regels met ruimte ertussen. Dit werkt op de verzameling rijen (of kolommen), niet op afzonderlijke items.
<!-- Multi-line flex with content alignment -->
<div class="flex flex-wrap content-center gap-4 bg-gray-100 h-64 p-4">
<div class="bg-blue-400 p-4 rounded">A</div>
<div class="bg-blue-400 p-4 rounded">B</div>
<div class="bg-blue-400 p-4 rounded">C</div>
<div class="bg-blue-400 p-4 rounded">D</div>
<div class="bg-blue-400 p-4 rounded">E</div>
</div>Praktijk: rij met feature-cards
Een rij met feature-cards gebruikt vaak flex items-start (zodat cards met verschillende hoogtes vanaf de bovenkant worden uitgelijnd), gecombineerd met gap-6. Elke card gebruikt intern flex flex-col, zodat een link 'Meer informatie' onderaan kan worden geplaatst met mt-auto. Deze combinatie creëert een professionele feature-grid waarin alle cards op dezelfde verticale positie beginnen.
<div class="flex items-start gap-6">
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-indigo-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm flex-1">Lightning-fast builds with the JIT engine.</p>
<a href="#" class="mt-4 text-indigo-600 text-sm font-medium">Learn more →</a>
</div>
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-green-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Flexible</h3>
<p class="text-gray-500 text-sm flex-1">Customize every aspect with the config.</p>
<a href="#" class="mt-4 text-green-600 text-sm font-medium">Learn more →</a>
</div>
</div>Korte controle
Test je begrip van de concepten uit deze les over Tailwind CSS Mastery.
Samenvatting van de les
In deze les heb je geleerd: justify-* bepaalt de uitlijning op de hoofdas (horizontaal in flex-row), items-* bepaalt de uitlijning op de kruisingsas (verticaal in flex-row) en de combinatie flex items-center justify-between is het standaardpatroon voor navigatiebalken. Hierna leer je hoe je bepaalt hoe flex-kinderen groeien en krimpen met de hulpprogramma's flex-grow, flex-shrink en basis.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Content rechtvaardigen en items uitlijnen” gratis?
Ja — de volledige tekst van “Content rechtvaardigen en items uitlijnen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Content rechtvaardigen en items uitlijnen”?
Positioneer children langs de hoofdas met justify-* en langs de dwarsas met items-* om veelgebruikte lay-outpatronen te realiseren. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Content rechtvaardigen en items uitlijnen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Flex en richting inschakelen
- Content rechtvaardigen en items uitlijnen
- Flex-groei, -krimp en -basis
- Wrapping en tussenruimte