CSS-lay-outs met flexbox en grid

Een pagina heeft al een lay-out voordat je flexbox of grid toevoegt. De normale documentstroom plaatst boxen in HTML-volgorde. In horizontale Nederlandse tekst staan blokken onder elkaar en loopt inline-inhoud van links naar rechts, met een nieuwe regel als de regel vol is.

Blokken nemen een regel in

Alinea's, koppen, div-elementen en secties zijn standaard blokboxen. Een blok met width: auto vult de beschikbare breedte van de container en groeit in hoogte mee met de inhoud. Als je de breedte instelt, komt het volgende blok niet op dezelfde regel te staan.

<p>Read the <a href="/guide">setup guide</a> first.</p>
<p>Then install it.</p>

De alinea's beginnen op afzonderlijke regels. De link is een inlinebox binnen de eerste alinea. Zelfs als de eerste alinea maar 300px breed is, begint de tweede alinea nog steeds eronder.

Inlineboxen volgen de tekst

Een <span>, <a>, <strong> of <em> neemt normaal alleen de breedte van de tekst in. Een niet-vervangen inlinebox negeert width en height. Als je a { width: 200px; } toevoegt, wordt de link dus niet 200px breed.

Horizontale binnenruimte, randen en marges duwen aangrenzende tekst opzij. Verticale binnenruimte en randen worden getekend, maar maken de afstand tussen omliggende regels niet groter; een grote achtergrond kan de regel erboven of eronder overlappen. Verticale marges hebben geen effect. Een afbeelding is een vervangen element: die is standaard inline, maar width en height zijn er wel op van toepassing.

Verticale marges kunnen samenvallen

In de normale documentstroom kunnen rakende verticale marges van blokboxen samenvallen tot één tussenruimte. Een alinea met margin-bottom: 24px, gevolgd door een kop met margin-top: 32px, laat daartussen 32px over. De grootste positieve marge wint; de tussenruimte is geen 56px. Met een positieve marge van 24px en een marge van −10px is het resultaat 14px. Horizontale marges blijven afzonderlijk.

De bovenmarge van een eerste kindelement kan ook samenvallen met de bovenmarge van het ouderelement als er geen rand, binnenruimte of inline-inhoud tussen zit. Een bovenmarge van 20px op een kop kan een hele header zonder binnenruimte omlaag verplaatsen, zonder ruimte binnen de header over te laten. Gebruik binnenruimte aan de bovenkant voor ruimte binnenin, voeg een rand toe of geef het ouderelement display: flow-root. Ook de ondermarge van een laatste kindelement kan samenvallen met de ondermarge van het ouderelement.

Marges van flex- en griditems vallen niet met elkaar samen. Als je een ouderelement van de normale documentstroom naar flexbox omschakelt, kunnen dezelfde twee positieve marges nu bij elkaar worden opgeteld. Ook zwevende en absoluut gepositioneerde boxen houden hun marges afzonderlijk.

Richtingen volgen de schrijfmodus

De blokrichting is de richting waarin opeenvolgende blokken komen; de inlinerichting is de richting waarin tekst loopt. Ook Arabisch en Hebreeuws gebruiken horizontale regels, maar hun inlinerichting loopt van rechts naar links. Logische eigenschappen volgen deze richtingen: margin-inline-start: 16px geeft een linkermarge in het Nederlands en een rechtermarge in het Arabisch. padding-block stelt binnenruimte langs de blokrichting in.

De eigenschap display regelt de verhouding van een box tot het ouderelement en de rangschikking van de kindelementen. Dit zijn afzonderlijke keuzes. Een flexcontainer kan een hele regel innemen en tegelijk de eigen kindelementen naast elkaar plaatsen.

Lees display van buiten naar binnen

Het buitenste weergavetype is block of inline. Het binnenste weergavetype beschrijft de lay-out binnen de box, zoals flow, flex of grid.

De moderne syntaxis met twee sleutelwoorden maakt het onderscheid zichtbaar: display: inline flex betekent hetzelfde als inline-flex. display: block flow-root betekent hetzelfde als flow-root. Een enkele waarde zoals grid geeft standaard een buitenste type block.

Laat een inlinebox afmetingen accepteren

nav a {
  display: inline-block;
  padding: 12px 16px;
}

Elke link staat nog steeds op een tekstregel, maar accepteert nu breedte, hoogte en verticale marges. De verticale binnenruimte maakt ruimte in de regelindeling in plaats van alleen over nabijgelegen regels heen te worden getekend. Zo krijgt een link een groter klikdoel.

Witruimte tussen inline-blockelementen in de HTML verschijnt als een kleine ruimte tussen de boxen. Als je een beheerste rij met een exacte tussenruimte nodig hebt, biedt flexbox die rechtstreeks.

Als je display verandert, verandert de betekenis van het HTML-element niet. Een div-element dat inline is vormgegeven, blijft een algemene container. Kies een lijst, link of knop op basis van het doel en geef daarna de box vorm.

Verberg een box met het juiste effect

Een verborgen foutmelding met display: none maakt geen tussenruimte. Als je de melding toont, duwt die de latere inhoud omlaag. Met visibility: hidden wordt de tussenruimte gereserveerd, zodat er niets hoeft te verschuiven wanneer de melding verschijnt. display: none voorkomt ook toetsenbordfocus en verwijdert de verborgen inhoud uit de uitvoer van schermlezers. Een klasse voor visueel verborgen tekst heeft een ander doel: tekst beschikbaar houden voor schermlezers terwijl die visueel verborgen is.

Kindelementen en onafhankelijke gebieden

Met ul { display: grid; } worden de lijstitems griditems. Links binnen die lijstitems blijven binnen de lay-out van hun eigen ouderelement. Geef het lijstitem een eigen lay-out om die links te rangschikken, of gebruik subgrid waar gedeelde sporen nodig zijn.

display: contents verwijdert de eigen box van het omhullende element, zodat de kindelementen aan de omliggende lay-out deelnemen. Door het toegankelijkheidsgedrag van browsers kan ook de rol van het omhullende element verdwijnen. Vermijd dit daarom op betekenisvolle bedieningselementen, lijsten en tabellen.

display: flow-root maakt een blokopmaakcontext, een onafhankelijk stroomgebied. Die omsluit zwevende kindelementen en voorkomt dat de marges van het ouderelement samenvallen met die van de kindelementen. Dit bereikt de eigenschap zonder inhoud af te snijden of schuifbalken toe te voegen.

Bij een portret in een artikel moet tekst er vaak enkele regels naast staan en daarna over de volle breedte eronder doorlopen. Een zwevende box zorgt voor die vorm van tekstomloop. Die heeft een andere taak dan een zijbalk die in een afzonderlijke kolom blijft staan.

Zet een afbeelding naast doorlopende tekst

img.portrait {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

Plaats de afbeelding vóór de alinea's die eromheen moeten lopen. De afbeelding verplaatst zich naar de linkerrand van de container. De tekst die volgt gebruikt de ruimte rechts ervan en blijft horizontaal 16px en onder de onderrand 8px op afstand. Zodra de tekst voorbij de afbeelding is, krijgen regels weer de volledige breedte van de container. Gebruik float: right voor de tegenoverliggende rand en float: none om het zweven op te heffen.

Een zwevende box wordt uit de normale documentstroom gehaald, maar inline-inhoud in de buurt loopt er nog steeds omheen. De volgende blokboxen zelf negeren de zwevende box: hun achtergronden en randen kunnen erachter doorlopen. Als je de achtergrond van een alinea onder de afbeelding ziet, betekent dat niet dat de tekst er niet omheen loopt.

Een zwevend element wordt een box op blokniveau. Een zwevende <span> kan daarom breedte en hoogte accepteren. Zonder ingestelde breedte krimpt een zwevende tekstbox tot de grootte van de inhoud; een afbeelding heeft eigen afmetingen.

Begin de volgende sectie onder de afbeelding

Stel dat de tekst korter is dan het portret en een nieuwe sectiekop naast het portret begint. Met clear regel je deze verhouding:

.next-section {
  clear: both;
}

De kop verschuift tot onder eerdere zwevende boxen aan beide kanten. clear: left maakt alleen ruimte onder links zwevende boxen; clear: right alleen onder rechts zwevende boxen. Als je een latere kop met clear verplaatst, wordt de eerdere afbeelding daardoor niet weer een gewoon blok.

Laat het ouderelement zijn zwevende boxen omsluiten

Een ouderelement met alleen zwevende kindelementen krijgt daardoor geen hoogte vanuit de normale documentstroom. De achtergrond en rand kunnen samengevallen lijken en de volgende inhoud kan naast de zwevende boxen omhoog schuiven. Laat het ouderelement de boxen omsluiten:

.profile {
  display: flow-root;
}

De hoogte van het ouderelement omvat nu de zwevende afbeelding. Dit verschilt van clear: flow-root verandert het stroomgebied van het ouderelement, terwijl clear een volgend element tot onder zwevende boxen verplaatst.

Oudere stijlbladen bevatten vaak een clearfix: een ::after-pseudo-element met content: "", display: block en clear: both. Je kunt ook overflow: auto tegenkomen om zwevende boxen te omsluiten. Dat kan scrollen toevoegen als de inhoud te groot is; flow-root geeft de omsluitende taak rechtstreeks aan.

Herken oudere kolomlay-outs

Vóór flexbox en grid werden paginakolommen vaak zwevend gemaakt met procentuele breedtes en clear-regels. Onderhoud die regels met kennis van zwevende boxen, maar kies flexbox of grid voor nieuwe kolommen waarvan je de afmetingen en uitlijning moet bepalen.

Een direct kindelement van een flex- of gridcontainer volgt die lay-out, zodat float geen effect heeft op dat item. Als tekst niet meer rond een zwevende afbeelding loopt nadat je display: flex aan het ouderelement hebt toegevoegd, inspecteer dan eerst de lay-out van het ouderelement.

Met positionering kan een box een andere overlappen of van zijn normale plaats worden verschoven. Bepaal voordat je een verschuiving instelt of de box zijn oorspronkelijke ruimte moet behouden en welk voorouderelement als referentie moet dienen.

Statisch, relatief en absoluut

Met position: relative; top: 10px; left: 20px wordt een box 10px omlaag en 20px naar rechts vanaf de oorspronkelijke plaats getekend. De aangrenzende elementen blijven staan. De oorspronkelijke ruimte blijft bestaan, zodat de box bij een grote verschuiving aangrenzende elementen kan overlappen.

Een relatief gepositioneerd ouderelement heeft geen verschuivingen nodig om als referentie voor een absoluut gepositioneerd kindelement te dienen. Dit is een veelgebruikt doel van relatieve positionering.

Bevestig een badge aan een kaart

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

De badge staat buiten de normale documentstroom, zodat de kaart er geen ruimte voor reserveert. De boven- en rechterrand van de badge staan 8px naar binnen vanaf de binnenruimteranden van de kaart. Laat genoeg ruimte in de inhoud van de kaart zodat een lange titel niet onder de badge door kan lopen.

Het omsluitende blok van een absoluut gepositioneerde box is meestal de box inclusief binnenruimte van het dichtstbijzijnde gepositioneerde voorouderelement. Een gepositioneerd element heeft een andere position-waarde dan static. Als de kaart statisch blijft, zoekt de badge verder omhoog in de reeks voorouderelementen. Zonder geschikt voorouderelement gebruikt de badge het oorspronkelijke omsluitende blok: een rechthoek ter grootte van de viewport bovenaan het document die met de pagina meescrolt. Een transform, filter of perspective met een andere waarde dan none op een voorouderelement kan ook deze referentie bepalen.

Rek of centreer een bovenliggende laag

Een absoluut gepositioneerde box met automatische afmetingen en verschuivingen die de box niet uitrekken, krimpt tot de grootte van de inhoud. Als je zowel de linker- als rechterverschuiving instelt bij een automatische breedte, vult de box de ruimte daartussen; het paar boven en onder werkt op dezelfde manier bij een automatische hoogte.

.overlay {
  position: absolute;
  inset: 0;
}

inset stelt boven, rechts, onder en links samen in. Met automatische afmetingen en zonder marges vult deze bovenliggende laag het omsluitende blok. Een ingestelde breedte of hoogte verandert de afmetingen, dus verwijder die beperkingen als de laag de hele box moet bedekken.

Gebruik voor een gecentreerde badge met onbekende afmetingen top: 50%; left: 50%; transform: translate(-50%, -50%). De verschuivingen verplaatsen de linkerbovenhoek van de badge naar het midden van het omsluitende blok. De translatie verplaatst de badge terug met de helft van de eigen breedte en hoogte. Bij een bekende breedte en hoogte is inset: 0; margin: auto een andere methode om te centreren.

Controleer de referentie voor percentages

Een ouderelement met content-box, width: 400px en een horizontale binnenruimte van 20px heeft een box inclusief binnenruimte van 440px. Een absoluut gepositioneerd kindelement met width: 50% heeft daarom een inhoudsbreedte van 220px. Als je alleen het inhoudsgebied van 400px van het ouderelement meet, krijg je een verkeerd resultaat.

Gebruik absolute positionering voor een badge, knopinfo of bovenliggende laag. Paginakolommen hebben boxen nodig die op elkaars afmetingen reageren; flexbox, grid en de normale documentstroom bieden die samenhang.

Een knop om terug naar boven te gaan en een tabelkop moeten allebei zichtbaar blijven, maar hebben een verschillende verhouding tot de pagina. Vaste positionering koppelt een bedieningselement aan een referentievenster. Klevende positionering houdt een box in de documentstroom en beperkt de beweging tot de eigen sectie.

Zet een bedieningselement vast aan de viewport

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

De knop blijft rechtsonder in het venster staan terwijl het document scrolt. De knop neemt geen ruimte in de normale documentstroom in. Een vaste koptekst reserveert evenmin ruimte en kan de eerste alinea bedekken.

Bij een vaste koptekst van 64px laat body { padding-top: 64px; } ruimte voor de eerste inhoud. Stel ook html { scroll-padding-top: 64px; } in, zodat links naar secties hun doelkoppen niet onder de koptekst plaatsen. Geef de koptekst een achtergrond, zodat tekst die erachterdoor scrolt niet zichtbaar is.

Een transform, filter of perspective met een andere waarde dan none op een voorouderelement kan dat voorouderelement tot het omsluitende blok van het vast gepositioneerde element maken. Het element blijft dan binnen dat voorouderelement en kan ermee uit beeld scrollen. Inspecteer voorouderelementen wanneer een vast bedieningselement onverwacht met de pagina meebeweegt.

Laat een kop binnen een sectie kleven

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Een klevende kop neemt eerst de normale plaats in. Wanneer de kop door scrollen boven de drempel top: 0 zou komen, blijft die daar staan. De kop kan niet voorbij het omsluitende blok bewegen: het einde van de sectie duwt de kop uiteindelijk uit beeld. Dit is nuttig voor lange tabellen en sectienavigatie.

De viewport is gewoonlijk de referentie voor vaste positionering. Klevende positionering gebruikt het dichtstbijzijnde relevante scrollende voorouderelement; de pagina is de referentie als er geen dichterbij gelegen scrollende box tussen zit.

Onderzoek een klevende box die niet blijft kleven

Controleer deze oorzaken op volgorde:

1. Stel op de as waarop de box moet kleven een andere verschuiving dan auto in, zoals top: 0 voor verticaal scrollen. Het sleutelwoord sticky alleen stelt geen drempel in.
2. Inspecteer voorouderelementen op overflow: hidden, auto of scroll. Die kunnen de referentie voor het klevende element worden, ook als een andere box daadwerkelijk scrolt.
3. Vergelijk de hoogte van de klevende box met het omsluitende blok. Een omhullend element dat slechts even hoog is als de kop, geeft de kop geen ruimte om te bewegen.

Een klevende zijbalk in een grid kan ook uitrekken tot de volledige hoogte van de rij. Met align-self: start behoudt de zijbalk de hoogte van de inhoud en blijft er bewegingsruimte over.

Houd inhoud en focus zichtbaar

Vaste en klevende balken gebruiken een deel van het zichtbare scherm. Bij 200% tekstvergroting kan een navigatiebalk veel hoger worden. Test zowel de toetsenbordnavigatie als het scrollen. WCAG 2.2-criterium 2.4.11, Focus niet bedekt (minimum), vereist dat door de auteur toegevoegde inhoud een element met focus niet volledig verbergt. Houd balken laag en zorg voor voldoende scrollruimte rond doelen.

Wanneer boxen overlappen, bepaalt de stapelvolgorde welke je vooraan ziet. Een hogere z-index kan een box naar voren brengen, maar alleen binnen de groep waarin die waarde wordt vergeleken.

Zorg dat z-index van toepassing is

z-index werkt op gepositioneerde elementen en op flex- of griditems. Een statische alinea in de normale documentstroom negeert de eigenschap. Een statisch griditem kan de eigenschap gebruiken zonder position: relative toe te voegen.

Zonder expliciete niveaus worden gepositioneerde boxen boven gewone niet-gepositioneerde boxen getekend. Bij vergelijkbare boxen op hetzelfde niveau wordt de box die later in de HTML staat bovenop getekend. Met positieve z-index-waarden, nul en negatieve waarden heb je meer controle over die volgorde.

Een context wordt als één geheel gestapeld

Een stapelcontext bevat een groep die de browser als geheel stapelt. Het niveau van een kindelement kan de groep niet boven een hoger geplaatste zustergroep tillen die zelf een stapelcontext is.

.site-header {
  position: relative;
  z-index: 1;
}
.menu {
  position: absolute;
  z-index: 9999;
}
main {
  position: relative;
  z-index: 2;
}

Hier staat .menu binnen .site-header, terwijl main een zusterelement daarvan is. Vergelijk eerst de buitenste groepen: de header staat op 1 en main op 2. Main wordt boven de hele header getekend, inclusief het menu. Als je 9999 verhoogt, verandert alleen de plaats van het menu binnen de header.

Verhoog de header zelf, bijvoorbeeld naar z-index: 3, of verwijder het onnodige niveau op main. Kies de wijziging die past bij de bedoelde volgorde van de hele pagina.

Zoek wat de groep maakt

Het hoofdelement maakt een stapelcontext. Veelvoorkomende andere oorzaken zijn:

• Een relatieve of absolute box met een andere z-index dan auto.
• Een flex- of griditem met een andere z-index dan auto.
• Elke vaste of klevende box.
• opacity onder 1, of een andere transform of filter dan none.
• isolation: isolate.

Een ouderelement met opacity: 0.9 kan daardoor een uitklapmenu vasthouden, ook als niemand een niveau op dat ouderelement heeft ingesteld. Loop in de ontwikkelaarstools de voorouderelementen omhoog langs als een hoger getal geen zichtbaar verschil maakt. Zoek het eerste paar zustergroepen waarvan de volgorde verkeerd is.

Houd decoraties binnen een component

.panel {
  position: relative;
  isolation: isolate;
}
.panel-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
}

isolation: isolate maakt een context zonder het uiterlijk van het paneel te veranderen. Het kindelement met de negatieve waarde wordt achter de tekst van het paneel maar boven de achtergrond van het paneel getekend. Zonder de lokale context kan het achter de achtergrond van het ouderelement terechtkomen en verdwijnen.

Gebruik een kleine gedeelde schaal voor de bedoelde paginalagen: bijvoorbeeld 1 voor verhoogde kaarten, 10 voor een klevende koptekst, 100 voor uitklapmenu's en 1000 voor een modaal dialoogvenster. Aangepaste CSS-eigenschappen zoals --z-dropdown: 100 maken de keuzes gemakkelijker te onderhouden.

Flexbox rangschikt een groep langs één hoofdrichting. Het is geschikt voor navigatielinks, werkbalken en andere items waarvan de afmetingen door hun inhoud worden bepaald. Een flexlay-out met regelomloop kan meerdere regels hebben, maar elke regel verdeelt de ruimte afzonderlijk.

Maak de container

.nav {
  display: flex;
}

De directe kindelementen van de navigatie worden flexitems. Een link binnen een lijstitem is geen flexitem van de navigatie, tenzij die ook een direct kindelement is. Tekst rechtstreeks binnen de container vormt een anoniem flexitem.

De standaardwaarden zijn een rij, geen regelomloop, niet groeien en wel mogen krimpen. Items beginnen aan de beginrand van de hoofdas. In een horizontale rij rekken items met automatische hoogte uit tot de hoogte van de regel, zodat ze vaak even hoog lijken.

Benoem de assen voordat je uitlijnt

De hoofdas volgt flex-direction. De dwarsas staat daar loodrecht op. In horizontale Nederlandse tekst:

Een rij volgt de inlinerichting, zodat het begin bij tekst van rechts naar links rechts ligt. Een kolom volgt de blokrichting. Hoofd- en dwarsas beschrijven rollen, geen vaste horizontale en verticale richtingen.

justify-content werkt op de hoofdas. align-items werkt op de dwarsas. Nadat je van rij naar kolom bent overgeschakeld, centreert justify-content: center verticaal, mits er hoogte over is.

Bereken welke items passen

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 200px;
}

Neem vijf kaarten in een inhoudsbreedte van 700px. Elke kaart begint op 200px en kan groeien of krimpen. Drie kaarten plus twee tussenruimtes hebben 632px nodig; vier plus drie tussenruimtes hebben 848px nodig. Op de eerste regel passen er drie.

De eerste regel verdeelt 700px min 32px aan tussenruimtes: elke kaart wordt ongeveer 222,7px breed. De overige twee delen 700px min één tussenruimte van 16px: elke kaart wordt 342px breed. Items op de tweede regel nemen de breedtes van de eerste regel niet over. Gebruik grid als kolommen over meerdere rijen moeten uitlijnen.

flex-flow: row wrap is een verkorte eigenschap voor richting en regelomloop. Zonder regelomloop houdt flexbox alle items op één regel en krimpen ze waar hun afmetingsgrenzen dat toelaten.

Houd de leesvolgorde betekenisvol

order is standaard 0. Lagere waarden verschijnen eerst; order: -1 plaatst een item vóór gewone items. Omgekeerde richtingen en order veranderen de tekenvolgorde, terwijl schermlezers en de normale toetsenbordfocus de HTML blijven volgen.

Houd belangrijke reeksen in een logische HTML-volgorde. Visueel herordenen kan een toetsenbordgebruiker over het scherm laten springen en ertoe leiden dat de pagina niet voldoet aan WCAG 1.3.2, Betekenisvolle volgorde, of 2.4.3, Focusvolgorde, wanneer de betekenis of bediening eronder lijdt.

Een item kan ook een container zijn. Een kaart in een flexrij kan de eigen display: flex; flex-direction: column gebruiken om de inhoud onder elkaar te zetten. Gebruik inline-flex als de buitenste container binnen een tekstregel moet staan, zoals een knop met een pictogram en label.

Flexbox begint met een afmeting voor elk item en past die afmetingen daarna aan de container aan. De drie onderdelen van flex regelen die aanpassing: groei, krimp en basis, in die volgorde.

Begin met de basis

flex-basis levert de beginafmeting langs de hoofdas. Bij auto gebruikt de eigenschap de breedte van het item in een rij of de hoogte in een kolom; als die afmeting ook automatisch is, bepaalt de inhoud de afmeting. Een expliciete basis heeft voorrang op de breedte, terwijl minimum- en maximumafmetingen het eindresultaat nog steeds begrenzen.

Trek alle basisafmetingen en tussenruimtes af van de inhoudsafmeting van de container. Een positieve uitkomst is vrije ruimte om te groeien. Een negatieve uitkomst is ruimte die de items moeten inleveren.

Verdeel positieve ruimte

Drie items in een rij van 600px hebben basisafmetingen van 100px en groeifactoren 1, 1 en 2. Zonder tussenruimtes nemen de basisafmetingen 300px in en blijft 300px over. Vier groeiaandelen verdelen die rest in delen van elk 75px. De uiteindelijke afmetingen zijn 175px, 175px en 250px.

Voeg nu gap: 20px toe. Twee tussenruimtes nemen 40px in, zodat na de basisafmetingen 260px overblijft. Elk aandeel wordt 65px; de uiteindelijke breedtes worden 165px, 165px en 230px. Een factor 2 verdubbelt de toegevoegde ruimte, niet de volledige uiteindelijke breedte.

Lever ruimte in met gewogen krimp

Twee items met basisafmetingen van 300px en 400px staan in een container van 500px zonder tussenruimte. Ze moeten 200px inleveren. Als beide flex-shrink: 1 hebben, zijn hun krimpgewichten 300 en 400: elke factor wordt vermenigvuldigd met de bijbehorende basisafmeting.

Het eerste item verliest ongeveer 85,7px en eindigt op ongeveer 214,3px. Het tweede verliest ongeveer 114,3px en eindigt op ongeveer 285,7px. Gelijke krimpfactoren betekenen niet dat het verlies in pixels gelijk is. flex-shrink: 0 beschermt de basisafmeting van een item, wat nuttig is voor een avatar of logo.

Deze berekeningen beschrijven items zonder binnenruimte, randen, marges of afmetingsgrenzen die het resultaat veranderen. Controleer die beperkingen als een werkelijke lay-out afwijkt.

Lees veelgebruikte verkorte waarden

Twee items met inhoudsbreedtes van 80px en 200px in een rij van 600px worden 240px en 360px met flex: auto: beide krijgen de helft van de resterende 320px erbij. Met flex: 1 en zonder beperkende minima beginnen beide bij nul en worden ze 300px breed.

Laat een flexibele kolom smal worden

Het automatische minimum van een flexitem kan ervoor zorgen dat het even breed blijft als een onafgebroken URL of coderegel. Sta krimpen toe op het item en regel de inhoud daarbinnen:

.sidebar { flex: 0 0 240px; }
.main { flex: 1; min-width: 0; }
.main pre { overflow-x: auto; }

De zijbalk blijft 240px breed. Main neemt de rest in. De code scrolt binnen main in plaats van de hele pagina breder te maken. Voor gewone lange tekst staat overflow-wrap: anywhere regelafbreking toe. Een minimum van nul maakt ruimte beschikbaar; het laat de inhoud niet vanzelf afbreken of scrollen.

Uitlijning begint nadat de afmetingen zijn bepaald. Bepaal de hoofdas, de dwarsas en de ruimte die op elke as overblijft. Een eigenschap kan geldig zijn en toch geen zichtbaar verschil maken als er geen ruimte meer te verdelen is.

Verdeel ruimte op de hoofdas

justify-content positioneert de groep langs de hoofdas. Bij drie items van 100px in een rij van 600px zonder tussenruimtes blijft 300px over:

flex-start plaatst items tegen elkaar aan het begin van de hoofdas; flex-end plaatst ze tegen elkaar aan het einde van de hoofdas. start en end volgen daarentegen de schrijfrichting. In een Nederlandstalige row-reverse plaatst flex-start de items tegen de rechterrand, maar start tegen de linkerrand.

Als items met flex: 1 alle ruimte op de regel innemen, heeft justify-content geen ruimte over om te verdelen. Als je de groei vermindert of verwijdert, verandert die situatie.

Lijn binnen elke regel uit

align-items positioneert items op de dwarsas binnen hun regel. De gebruikelijke standaardwaarde stretch laat items met automatische hoogte in een rij de hoogte van de regel vullen. Een item met een ingestelde hoogte rekt niet op deze manier uit. Gebruik center, start of end voor andere posities, of baseline om tekst van verschillende groottes op de basislijn uit te lijnen.

align-self overschrijft deze keuze voor één item. Flexbox heeft geen justify-self: items delen de hoofdas als groep. Ook justify-items lijnt flexitems niet uit.

Om één kindelement in beide richtingen te centreren, stel je justify-content: center; align-items: center in op het bovenliggende flexelement. Een hoger ouderelement, bijvoorbeeld met min-height: 100vh, geeft ruimte om verticaal centreren zichtbaar te maken. Als het enige item de afmeting van de regel op de dwarsas al vult, leidt centreren daar niet tot beweging.

Scheid groepen met automatische marges

nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  margin-inline-end: auto;
}

In horizontaal Nederlands blijft het logo links terwijl de links naar rechts gaan. De automatische eindmarge van het logo neemt de resterende ruimte op. Een automatische beginmarge op een item duwt daarentegen dat item en de daaropvolgende items naar het einde. Logische marges passen zich aan als de tekstrichting verandert.

Eén item met margin: auto kan op beide assen centreren. Als een item te groot is, voorkomen automatische marges dat de overlopende inhoud voorbij de onbereikbare beginrand wordt geplaatst, wat bij gewoon centreren wel kan gebeuren.

Maak onderscheid tussen regels en items

align-content verplaatst de regels als groep op de dwarsas in een container met regelomloop en overgebleven ruimte. De eigenschap heeft geen effect bij flex-wrap: nowrap. Met wrap kan de eigenschap nog steeds een regel positioneren, ook als de huidige items op slechts één regel passen. align-items regelt de items binnen elke regel.

gap: 16px 24px stelt een tussenruimte van 16px tussen rijen en 24px tussen kolommen in. Gap maakt ruimte tussen items en regels, nooit aan de buitenkant van de container. Voeg binnenruimte toe voor ruimte aan de buitenkant. Ruimte die door uitlijning wordt verdeeld, komt boven op de tussenruimte.

Grid definieert rijen en kolommen samen. Stel de sporen in op een container en laat de directe kindelementen ze vervolgens innemen. Anders dan bij flexregels met regelomloop delen gridrijen dezelfde kolomstructuur.

Benoem de onderdelen

Een spoor is één rij of kolom tussen twee gridlijnen. Een cel is het snijpunt van één rij en één kolom. Een gridgebied is een rechthoek van één of meer cellen. Tussenruimtes scheiden de sporen.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 20px;
}

grid-template-columns definieert de expliciete kolommen; grid-template-rows definieert de expliciete rijen. Zonder expliciete kolommen heeft een grid één kolom en staan de items onder elkaar in rijen.

Bereken een fr-aandeel

De eenheid fr verdeelt de ruimte die overblijft na vaste sporen en tussenruimtes. In een container van 900px heeft het voorbeeld een vaste kolom van 200px en twee tussenruimtes van 20px. Trek die eerst af: er blijft 660px over. De twee flexibele kolommen vragen samen drie aandelen, dus één aandeel is 220px. De breedtes zijn 200px, 220px en 440px.

De fracties verdelen de resterende ruimte voor sporen, niet de volledige 900px. Een 2fr-spoor krijgt tweemaal het flexibele aandeel van een 1fr-spoor wanneer minimumafmetingen ze niet beperken.

Herhaal sporen en stel grenzen in

repeat(4, 1fr) is een verkorte notatie voor vier gelijke flexibele sporen. Een patroon herhalen kan ook: repeat(2, 100px 1fr) maakt 100px 1fr 100px 1fr.

Voor spoorafmetingen kun je ook lengtes, percentages, auto, min-content en max-content gebruiken. De inhoudssleutelwoorden vragen om afmetingen op basis van de intrinsieke behoeften van de inhoud.

minmax(150px, 1fr) geeft een spoor een minimum van 150px en een flexibel maximum. Gebruik voor automatisch gemaakte rijen grid-auto-rows: minmax(100px, auto) om een minimum van 100px te krijgen en tegelijk hogere inhoud een rij te laten vergroten.

Een gewoon 1fr-spoor heeft een automatisch minimum, zoals minmax(auto, 1fr). Een lange onafbreekbare URL kan één kolom breder maken dan de rest. Gebruik repeat(3, minmax(0, 1fr)) als de kolommen de beschikbare breedte gelijk moeten delen en zorg dat te grote inhoud daarbinnen kan afbreken of scrollen.

Houd tussenruimtes binnen de beschikbare breedte

gap: 16px 32px betekent 16px tussen rijen en 32px tussen kolommen. De eigenschap maakt geen binnenruimte rond het grid.

Drie kolommen van 33.33% gebruiken al bijna de hele container van 900px. Twee tussenruimtes van 20px voegen dan ongeveer 40px toe voorbij de breedte van de container. Fractionele sporen houden rekening met die tussenruimtes voordat ze de ruimte verdelen, zodat repeat(3, 1fr) voorkomt dat percentages plus tussenruimte overlopende inhoud veroorzaken wanneer de inhoudsminima passen.

Laat rijen op inhoud reageren

grid-template-rows: auto 1fr auto past bij een koptekst, hoofdgebied en voettekst. De buitenste rijen passen zich aan hun inhoud aan. Als een ingestelde hoogte of minimumhoogte van de container moet worden gevuld, neemt de middelste rij de resterende hoogte in. Houd ruimte voor groeiende inhoud; met een minimale paginahoogte kan een langere pagina meegroeien.

Plaatsing in een grid beschrijft de grenzen van een item. Tel de lijnen rond de kolommen en rijen of geef een rechthoekig gebied een naam en plaats het item daar. Beide methoden rangschikken boxen zonder hun volgorde in de HTML te veranderen.

Tel grenzen, geen kolommen

Een grid met drie kolommen heeft vier kolomlijnen. In horizontaal Nederlands staat kolomlijn 1 links en rijlijn 1 bovenaan. Negatieve getallen tellen terug vanaf het einde van het expliciete grid: -1 is de laatste lijn.

Om drie kolommen vanaf lijn 1 te beslaan, eindig je bij lijn 4. Als je bij lijn 3 eindigt, besla je maar twee sporen.

Plaats in een dashboard met vier kolommen en drie rijen een grafiek met grid-column: 1 / 4; grid-row: 1 / 3. Die neemt drie kolommen en twee rijen in: zes cellen. Een statistiekpaneel op grid-column: 4; grid-row: 1 / 3 neemt de laatste kolom ernaast in. Een tabel op grid-column: 1 / -1; grid-row: 3 vult de derde rij.

Teken de pagina met gebiedsnamen

.page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Elke tekenreeks beschrijft een rij en elk woord beschrijft een cel. Door header over de eerste rij te herhalen, beslaat de header beide kolommen. Een punt markeert een lege cel. Elke rij moet hetzelfde aantal cellen bevatten en elke herhaalde naam moet één rechthoek vormen. Een benoemd gebied in L-vorm maakt de hele declaratie grid-template-areas ongeldig.

Een gebied met de naam main maakt ook lijnen met de namen main-start en main-end. Je kunt die namen gebruiken voor de grenzen van een ander item. Definieer eigen lijnnamen tussen vierkante haken in de sporenlijst, zoals [content-start] 600px [content-end].

Laat items binnen één gridgebied overlappen

Een afbeelding en bijschrift kunnen allebei grid-area: 1 / 1 gebruiken. Ze delen de eerste cel; het bijschrift dat later in de HTML staat, wordt over de afbeelding getekend. align-self: end verplaatst het bijschrift naar de onderkant van dat gebied. Griditems accepteren z-index zonder dat een niet-statische positie nodig is, zodat je hun laagvolgorde expliciet kunt veranderen.

Behoud de leesvolgorde

Handmatige plaatsing beïnvloedt het uiterlijk, niet de HTML-volgorde die schermlezers en toetsenbordfocus volgen. Houd instructies, koppen en links in een betekenisvolle bronvolgorde. Een lay-out kan logisch lijken terwijl navigatie met de tabtoets tussen ver uit elkaar gelegen cellen springt; daardoor kan de pagina niet voldoen aan WCAG 1.3.2 of 2.4.3 wanneer de betekenis of bediening eronder lijdt.

Een productlijst kan groeien van enkele kaarten naar veel kaarten zonder de CSS te veranderen. Definieer de kolommen, laat automatische plaatsing rijen maken en kies of ongebruikte kolommen hun ruimte moeten behouden.

Laat items de volgende cel vinden

De standaardwaarde grid-auto-flow: row plaatst niet-gepositioneerde items in bronvolgorde, eerst over een rij en daarna omlaag naar de volgende. Bezette cellen worden overgeslagen. Extra sporen vormen het impliciete grid.

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Zeven items maken drie rijen. De laatste rij bevat één item. Elke rij is minstens 150px hoog en kan met de inhoud meegroeien. Expliciete sporen komen uit het sjabloon; impliciete sporen worden toegevoegd wanneer de plaatsing ze nodig heeft.

Negatieve lijnnummers tellen alleen binnen het expliciete grid. Als je kolommen maar geen rijen definieert, kan grid-row: 1 / -1 niet elke automatisch gemaakte rij betekenen. Definieer expliciete rijen als een item hun volledige hoogte moet beslaan.

grid-auto-flow: column vult kolommen en maakt extra kolommen waarvan grid-auto-columns de afmetingen bepaalt. Als je dense toevoegt, kunnen latere kleinere items gaten opvullen die grotere overspanningen achterlaten. Dat kan de visuele volgorde veranderen, dus vermijd dit bij instructies in een bepaalde volgorde of andere inhoud waarvan de volgorde van belang is.

Bereken het aantal kolommen vanuit een minimum

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Bij een inhoudsbreedte van 1000px hebben vier kolommen van 200px plus drie tussenruimtes van 16px samen 848px nodig. Vijf kolommen plus vier tussenruimtes hebben 1064px nodig, dus er passen er maar vier. Hun flexibele uiteindelijke breedtes zijn 238px: trek 48px aan tussenruimtes af en deel de resterende 952px door vier.

Bij 500px hebben twee minimale kolommen plus één tussenruimte 416px nodig; drie hebben 632px nodig. Er passen er twee en elk wordt 242px. Het aantal kolommen verandert met de beschikbare ruimte zonder breekpunt.

Kies wat er met ongebruikte kolommen gebeurt

Met genoeg items zien auto-fill en auto-fit er hetzelfde uit. Met slechts drie items in dat grid van 1000px behoudt auto-fill een vierde lege kolom, zodat elke bezette kolom 238px breed blijft. auto-fit laat dat lege spoor en de bijbehorende tussenruimte samenvallen. De drie bezette kolommen delen dan 968px en worden elk ongeveer 322,7px.

Een kolom met ergens daarin een item is bezet, ook als één cel in de laatste rij leeg is. Auto-fit laat lege sporen samenvallen, niet elke lege cel.

Bescherm de smalste container

Automatisch herhalen vereist een bepaalde minimale of maximale spoorafmeting. repeat(auto-fill, 1fr) is ongeldig. Een vast minimum van 400px kan ook overlopen in een container van 320px. Gebruik:

grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 400px), 1fr));

min(100%, 400px) kiest het kleinere minimum, zodat een smalle container één spoor kan bevatten zonder tot 400px te worden gedwongen. Blijf te grote tekst of afbeeldingen binnen de kaarten afhandelen.

Uitlijning in een grid werkt op twee verschillende niveaus. Je kunt een item binnen zijn gebied verplaatsen of alle sporen samen binnen de container verplaatsen. Bepaal eerst welke ruimte je wilt verdelen.

Lijn items binnen hun gebied uit

In horizontaal Nederlands werken justify--eigenschappen op de inlineas, de horizontale as. align--eigenschappen werken op de blokas, de verticale as. Grid ondersteunt itemuitlijning op beide assen.

Mogelijke waarden zijn start, end, center en stretch. align-items: baseline lijnt tekst op de basislijn uit. De meeste items met automatische afmetingen rekken standaard uit. Een afbeelding met een eigen beeldverhouding begint normaal aan de beginrand van het gebied in plaats van in beide richtingen te worden uitgerekt.

Bij een rij kaarten zorgt uitrekken ervoor dat elke kaart de hoogte van de rij vult. Verander dit naar align-items: start en elke kaart behoudt de hoogte van de inhoud; de onderranden kunnen verschillen. align-self: end op één bijschrift plaatst het onderaan het gridgebied.

Centreer een box in beide richtingen

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items combineert align-items gevolgd door justify-items. Bij één waarde past de eigenschap die waarde op beide toe. De minimumhoogte maakt verticale ruimte rond een kort item. place-self is de bijbehorende verkorte eigenschap op een afzonderlijk item.

Het item blijft een box met tekst erin. Om de woorden binnen die box te centreren, stel je text-align: center in op het item. Als je een box naar het midden van een cel verplaatst, verandert de uitlijning van de tekst niet.

Verplaats de sporen als groep

justify-content positioneert alle kolommen samen langs de inlineas. align-content positioneert de rijen langs de blokas. Deze eigenschappen hebben extra ruimte buiten de sporen nodig om hun effect te tonen.

Bij drie vaste kolommen van 200px in een container van 900px zonder tussenruimtes blijft 300px over. justify-content: center laat 150px over vóór de eerste kolom en na de laatste. justify-content: space-between plaatst de buitenste kolommen aan de containerranden en verdeelt 150px tussen aangrenzende kolommen. Items blijven binnen hun eigen sporen terwijl de sporen bewegen.

Als de kolommen fr gebruiken en alle beschikbare breedte vullen, blijft er horizontaal niets over voor justify-content om te verdelen. Met justify-items: center kun je nog steeds zichtbaar een smal kindelement binnen het brede spoor centreren. De eerste eigenschap positioneert sporen; de tweede positioneert items.

Een pagina kan meerdere lay-outmethoden tegelijk gebruiken. Kies elke methode op basis van de verhouding tussen de boxen in dat deel van de pagina: een tekstreeks, een flexibele groep, gedeelde kolommen of een overlappende laag.

Begin bij de inhoud

De normale documentstroom handelt artikelen, koppen en alinea's al af. Tekst loopt door op een volgende regel en latere blokken schuiven omlaag als eerdere inhoud groeit. Voeg meer structuur toe als het ontwerp om een andere verhouding vraagt.

Flexbox is eendimensionaal: het verdeelt ruimte langs een rij of kolom, waarbij elke regel die naar een volgende regel loopt onafhankelijk is. Grid is tweedimensionaal: het definieert kolommen en rijen samen. Dit zijn keuzes over de beperkingen van de lay-out, geen verbod om een van beide hulpmiddelen voor een eenvoudige rij te gebruiken.

Vergelijk een rij met regelomloop met gedeelde kolommen

Zeven kaarten nemen een inhoudsbreedte van 1000px in met tussenruimtes van 16px. Geef in flexbox elke kaart flex: 1 1 200px en sta regelomloop toe. Op de eerste regel passen vier kaarten die elk groeien tot 238px. De drie kaarten op de tweede regel groeien elk tot ongeveer 322,7px. Elke regel verdeelt de eigen vrije ruimte.

Gebruik nu repeat(auto-fill, minmax(200px, 1fr)) in grid. Er passen vier kolommen. Alle zeven kaarten gebruiken dezelfde kolombreedte van 238px; op de laatste rij blijft één cel leeg. Grid houdt de rijen onderling uitgelijnd.

Gebruik de flexversie als bredere items op de laatste regel bij het ontwerp passen. Gebruik de gridversie als een consistente kolomstructuur belangrijk is.

Combineer methoden op verschillende niveaus

Een pagina kan grid gebruiken voor een zijbalk en hoofdgebied, flexbox voor de werkbalk van het hoofdgebied en een absoluut gepositioneerde badge binnen één kaart. Een kaart kan aan de buitenkant een griditem zijn en aan de binnenkant een flexcontainer. Stel de buitenste verhouding in op het ouderelement en de binnenste indeling op de kaart zelf.

Voor een lange tekstlijst maakt columns: 3 of column-width: 250px een meerkolomslay-out. Tekst loopt eerst omlaag door één kolom en daarna verder in de volgende; het is geen grid van onafhankelijke kaarten. Controleer of deze leesroute bij de inhoud past.

Lees oudere lay-outs zorgvuldig

Zwevende kolommen, inline-blockgrids en HTML-tabellen voor paginalay-outs komen nog steeds voor in oudere code. Hun regels voor tussenruimte en omsluiting verschillen van die van flexbox en grid. Gebruik moderne lay-outtools voor nieuwe paginastructuren. Bewaar <table> voor gegevens waarvan de rijen en kolommen verbanden in tabelvorm uitdrukken.

Een bruikbare paginalay-out heeft een goed leesbare inhoudsbreedte, ruimte aan de randen en plaats voor langere inhoud. Bouw de hoofdgebieden in de documentstroom, zodat een groeiend artikel de voettekst vanzelf omlaag duwt.

Centreer een inhoudskolom

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

De maximale breedte begrenst de groei op brede schermen. Automatische inlinemarges verdelen de overgebleven ruimte over beide kanten. Binnenruimte houdt tekst weg van de randen van smalle schermen. Voor lopende tekst geeft max-width: 65ch een regellengte van ongeveer 65 tekens; één ch is de breedte van het cijfer 0 in het huidige lettertype. Een regellengte van ongeveer 45–75 tekens is prettig leesbaar, al verschillen de breedtes van letters.

Zet paginagebieden op een grid

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

De koptekst en voettekst beslaan beide kolommen. De zijbalk behoudt 240px en het hoofdgebied krijgt de rest. Het minimum van nul op het flexibele spoor voorkomt dat brede inhoud het spoor groter maakt dan het beschikbare aandeel. Zorg dat die inhoud binnen het hoofdgebied kan afbreken of scrollen.

Het patroon met drie kolommen, vaak de heilige-graallay-out genoemd, gebruikt 200px 1fr 200px en de gebieden "nav main aside" in de middelste rij, met de koptekst en voettekst over alle drie de kolommen. Vaste zijkolommen hebben nog steeds voldoende beschikbare breedte nodig; test de lay-out bij smalle afmetingen.

Houd de voettekst van een korte pagina onderaan

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Met koptekst, hoofdgebied en voettekst als directe kindelementen vult de middelste rij de ongebruikte hoogte. De voettekst van een korte pagina komt onderaan het venster; bij een lange pagina volgt de voettekst op de inhoud. Dit patroon houdt de voettekst onderaan, maar de voettekst heeft geen position: sticky nodig.

De traditionele viewporteenheid is vh. Op telefoons kan 100vh doorlopen achter zichtbare bedieningselementen van de browser. Dynamische viewporthoogte, dvh, volgt de zichtbare hoogte als die bedieningselementen veranderen; alle grote browsers ondersteunen de eenheid sinds 2022. Gebruik min-height zodat langere inhoud de pagina kan vergroten. Bij een vaste height kan inhoud overlopen over wat erop volgt.

Een flexalternatief gebruikt een body als kolom met min-height: 100dvh, gevolgd door main { flex: 1; }. Gebruik voor een rij met zijbalk .sidebar { flex: 0 0 240px; } en .main { flex: 1; min-width: 0; }.

Laat een zijbalk kleven en een afbeelding breed uitlopen

Een zijbalk in een grid kan position: sticky; top: 16px; align-self: start gebruiken. Door de hoogte van de eigen inhoud te behouden, blijft er ruimte om binnen de rij te bewegen.

Definieer voor artikelinhoud over de volle breedte de kolommen als 1fr min(65ch, 100% - 32px) 1fr. Plaats gewone kindelementen in kolom 2 en een brede afbeelding op grid-column: 1 / -1. Het middelste spoor blijft leesbaar terwijl de afbeelding de volledige containerbreedte beslaat.

Kleine interfaceonderdelen combineren steeds dezelfde paar verhoudingen: een afbeelding behoudt de eigen afmetingen, tekst vult wat overblijft, samenhangende bedieningselementen delen een rij of verschillende kaarten lijnen hun onderdelen uit. Geef elke container de lay-out die bij de taak past.

Kies de juiste manier van centreren

Flexbox kan ook één kindelement centreren met justify-content: center; align-items: center. Zorg dat de container ruimte over heeft op de betreffende as.

Een navigatierij en een mediarij

nav { display: flex; align-items: center; gap: 16px; }
.logo { margin-inline-end: auto; }
.media { display: flex; align-items: flex-start; gap: 16px; }
.media img { flex: none; width: 64px; }
.media-body { flex: 1; min-width: 0; }

In het Nederlands blijft het logo links en komen de links rechts te staan. Als de navigatie precies twee kindelementen heeft, een logo en een lijst met links, kan justify-content: space-between ze scheiden; de lijst heeft een eigen flexlay-out nodig om de links te rangschikken.

In de mediarij behoudt de afbeelding de breedte. Tekst krijgt de rest en kan krimpen. Uitlijning aan het begin van de dwarsas voorkomt dat een afbeelding met automatische hoogte wordt uitgerekt tot de hoogte van een lang tekstblok. Dit past bij een reactie, profiel of productregel.

Kaarten met uitgelijnde knoppen

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.card { display: flex; flex-direction: column; }
.card .button { margin-top: auto; }

Het bovenliggende grid rekt kaarten in elke rij uit tot dezelfde hoogte. Binnen elke kaart neemt de automatische bovenmarge de ongebruikte verticale ruimte vóór de knop in, zodat de knop onderaan staat. Titels kunnen nog steeds verschillende hoogtes hebben.

Gebruik subgrid om titels, tekst en voetteksten van verschillende kaarten uit te lijnen. Maak van elke kaart een griditem dat drie bovenliggende rijen beslaat en stel dan display: grid; grid-template-rows: subgrid in. Elke kaart neemt die bovenliggende rijen over voor de drie onderdelen. Subgrid werkt sinds september 2023 in alle grote browsers.

Bovenliggende lagen, formulieren en invoergroepen

Maak voor tekst over een afbeelding van het omhullende element een grid en plaats beide kindelementen op grid-area: 1 / 1. Een later bijschrift wordt boven de afbeelding getekend. Een andere mogelijkheid is een relatief gepositioneerd omhullend element met een absoluut gepositioneerde bijschriftlaag die inset: 0 gebruikt.

Een formulier met afwisselend labels en velden kan grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center gebruiken. Het breedste label bepaalt één gedeelde labelkolom. De velden staan uitgelijnd in de tweede kolom; afzonderlijke flexrijen kunnen die labelbreedte niet automatisch delen.

Een zoekgroep gebruikt display: flex; gap: 8px, met input { flex: 1; min-width: 0; } en button { flex: none; }. Het invoerveld kan krimpen terwijl de knop de natuurlijke breedte behoudt. Gebruik voor labels of bedieningselementen in een werkbalk die bij hun natuurlijke breedte naar een volgende regel moeten lopen display: flex; flex-wrap: wrap; gap: 8px.

Een lay-outfout is gemakkelijker op te lossen als je de werkelijke boxen van de browser inspecteert. Begin bij het element dat is verschoven of overloopt en controleer de lay-out waaraan het deelneemt voordat je waarden verandert.

Inspecteer in een bruikbare volgorde

1. Zoek het element in de ontwikkelaarstools.
2. Inspecteer de berekende display van het ouderelement: de normale documentstroom, flex en grid geven eigenschappen verschillende taken.
3. Controleer of je eigenschap in die lay-out van toepassing is op dat element.
4. Vergelijk berekende afmetingen, marges en positie met de waarden die je verwachtte.
5. Schakel steeds één declaratie uit of in om te zien welke beperking het probleem veroorzaakt.

Het boxmodelpaneel toont inhoud, binnenruimte, rand en marge. Gridhulplagen tonen lijnen, nummers, sporen en tussenruimtes; flexhulplagen tonen items en de ruimte die ze krijgen. Gebruik ze om te controleren wat de browser heeft gemaakt, niet alleen wat met het stijlblad was bedoeld.

Controleer inactieve eigenschappen

Verschuivingen doen niets op een statisch element. Breedte en hoogte doen niets op een gewone inline-<span>, al bepalen ze wel de afmetingen van een inlineafbeelding. z-index heeft een gepositioneerde box of een flex- of griditem nodig. float heeft geen effect op flex- of griditems en justify-self kan een flexitem niet uitlijnen.

Een geldige uitlijningsdeclaratie kan geen zichtbaar effect hebben omdat items alle ruimte al gebruiken. Ook heeft align-content geen effect op een flexcontainer met nowrap. Klevende positionering heeft een verschuiving en bewegingsruimte nodig.

Spoor horizontaal overlopende inhoud op

Overlopende inhoud kan komen door een te grote box of door een kleinere box die door marges, verschuivingen of breedtes van aangrenzende elementen voorbij een rand wordt geduwd. Veelvoorkomende oorzaken zijn:

• Een vaste breedte, zoals 1200px, die groter is dan de viewport.
• width: 100% plus binnenruimte bij berekening met content-box.
• width: 100vw, waarin de breedte van een zichtbare verticale schuifbalk kan zijn inbegrepen.
• Een lang onafgebroken woord, een URL of een coderegel.
• Het automatische minimum van een flexitem of van een 1fr-spoor.
• Een minimum voor automatisch herhalen dat breder is dan de container.

Voeg tijdelijk * { outline: 1px solid red; } toe om randen zichtbaar te maken. Omtreklijnen gebruiken geen ruimte in de lay-out, zodat ze grenzen tonen zonder de boxafmetingen te veranderen, zoals randen wel zouden doen.

Werk een breed codeblok uit

Een flexpagina heeft een zijbalk van 240px en een hoofdkolom met een codevoorbeeld van 1400px breed. De hele pagina scrolt zijwaarts. De flexhulplaag toont dat het hoofdgebied breder is dan zijn aandeel en de berekende minimumbreedte is auto.

.main { min-width: 0; }
.main pre { overflow-x: auto; }

De eerste regel laat het flexitem krimpen. De tweede houdt de brede code toegankelijk via lokaal horizontaal scrollen. Als je alle overlopende pagina-inhoud verbergt, verberg je het symptoom zonder de code beschikbaar te maken.

Inspecteer bij andere verrassingen samenvallende marges, een vaste koptekst die inhoud bedekt, een absoluut gepositioneerd kindelement waarvan het bedoelde ouderelement statisch is, of een laag die vastzit binnen een stapelcontext die door ondoorzichtigheid of een transformatie is gemaakt.

Test echte inhoud en beperkte ruimte

Verander de grootte van het venster, gebruik een lange naam of URL en vergroot tekst tot 200%. Controleer de toetsenbordfocus bij vaste balken. WCAG 2.2-criterium 1.4.4 vereist dat tekst tot 200% kan worden vergroot zonder verlies van inhoud of functie. Criterium 1.4.10 vereist in het algemeen herschikking bij 320 CSS-pixels zonder scrollen in twee richtingen; voor inhoud die een tweedimensionale lay-out nodig heeft, zoals een gegevenstabel, gelden uitzonderingen. Test meer dan de korte voorbeeldtekst waarmee de pagina er aanvankelijk goed uitzag.