Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten
Bouw praktische navigatiebalken, kaart rasters en media-objecten met Flexbox.
Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten is een gratis CSS Academy-les op CoddyKit. Dit is les 4 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 CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Waarom Flexbox-patronen belangrijk zijn
Bepaalde indelingspatronen komen in vrijwel elk webproject voor. Flexbox lost ze efficiënt op met minimale CSS. Als je deze patronen kent, ontwikkel je sneller en heb je minder code nodig.
Patroon voor een navigatiebalk
Een horizontale navigatiebalk met een logo links en links rechts:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Gecentreerde hero-sectie
Inhoud met volledige hoogte die met Flexbox wordt gecentreerd:
<div class="hero">
<h1>Welcome</h1>
</div>
Kaartrooster
Responsief kaartrooster met afbreken naar een nieuwe regel en consistente tussenruimten:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Media-object
Het media-object — een afbeelding met vaste breedte naast flexibele tekst — is een fundamenteel gebruikersinterfacepatroon dat wordt gebruikt in reacties, berichten op sociale media en lijstelementen:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Voettekst onderaan met flex
Laat de voettekst onderaan verschijnen zonder vaste hoogten in te stellen:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Knop met pictogram en tekst
Een verticaal gecentreerd pictogram met tekst in een knop:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Holy-grailindeling met Flexbox
Indeling met drie kolommen volgens het holy-grailpatroon (koptekst, voettekst, zijbalk-hoofdinhoud-zijbalk):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Formulierrij met labels
Uitgelijnde combinaties van labels en invoervelden in een formulierrij:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Miniatuurgalerij
Een afbeeldingsgalerij die naar nieuwe regels afbreekt:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Lijst met chips en tags
Chips en tags die zich in de regel afbreken en zich gedragen als tekst:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Korte controle
Wat voorkomt in het media-objectpatroon dat het tekstgedeelte buiten de container stroomt als het een lange tekenreeks bevat die niet kan worden afgebroken?
Samenvatting
Veelvoorkomende Flexbox-patronen: navigatiebalk (logo + automatische marge + links), hero-sectie (kolom + gecentreerde uitlijning), media-object (vaste afbeelding + flex:1-tekstgedeelte met min-width:0), voettekst onderaan (kolom met hoofdinhoud + flex:1) en kaartrooster (wrap + flex:1 1 Xpx). Deze vijf patronen dekken het merendeel van de indelingsbehoeften uit de praktijk.
Leer CSS 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
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten” gratis?
Ja — de volledige tekst van “Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten” 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 CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten”?
Bouw praktische navigatiebalken, kaart rasters en media-objecten met Flexbox. Je oefent met 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 CSS Academy te beginnen?
Ervaring vooraf is niet nodig. 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 4 van 4.
Hoe lang duurt de les “Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten”?
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 CSS Academy?
Ja. Elke les over 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
- Uitlijning van flex-items overschrijven met align-self
- Eigenschap order en visuele herschikking
- Patronen voor de verkorte schrijfwijze flex
- Veelgebruikte Flexbox-layouts: navigatie, kaarten en media-objecten