Flexbox Generator
Live preview
Waarom een visuele Flexbox generator gebruiken?
CSS Flexbox heeft veel eigenschappen die met elkaar wisselwerken — flex-direction, justify-content, align-items, align-content, flex-wrap — en hun interacties kunnen verwarrend zijn. Onze visuele generator laat je elke eigenschap aanpassen via een dropdown en de lay-out in realtime zien bijwerken, waardoor het de snelste manier is om Flexbox te leren en lay-outs te bouwen zonder herhaald proberen.
Live preview
Zie precies hoe je Flexbox-lay-out gedraagt bij elke eigenschapswijziging — geen giswerk
Alle eigenschappen gedekt
Omvat flex-direction, justify-content, align-items, flex-wrap en gap in één interface
Gebruiksklare CSS-output
Kopieert een schoon .container {} blok klaar om in je stijlblad te plakken
Een Flexbox-lay-out maken
Stel richting en wrap in
Kies flex-direction (rij/kolom) en flex-wrap om de hoofdas en overloop te controleren
Lijn items uit
Stel justify-content en align-items in om de distributie en uitlijning van items te controleren
CSS kopiëren
Klik op 'CSS kopiëren' voor het volledige .container CSS-blok klaar voor je project
Flexbox-gebruiksscenario's
Navigatiebalken
Flexbox is ideaal voor horizontale navigatiebalken — gebruik justify-content: space-between voor logo + links
Kaartenrasters
Gebruik flex-wrap: wrap met vaste flex-basis voor responsieve kaartenrasters die zich aanpassen op mobiel
Perfect centreren
justify-content: center + align-items: center is de eenvoudigste manier om elk element te centreren
Formulier-lay-outs
Lijn formulierlabels en -velden horizontaal of verticaal uit met Flexbox voor schone formulieren
Flexbox best practices
✓ Begrijp de hoofdas vs de kruisas
justify-content bestuurt de hoofdas (rij = horizontaal). align-items bestuurt de kruisas. Deze rollen worden omgekeerd met flex-direction: column.
✓ Gebruik flex: 1 voor flexibele items
Het toevoegen van flex: 1 aan een flex-kind laat het groeien om de beschikbare ruimte te vullen. Combineer met min-width: 0 om overloop te voorkomen.
✓ Gebruik gap in plaats van marges
De gap-eigenschap creëert consistente ruimte tussen flex-items zonder marges aan de buitenranden toe te voegen — veel schoner.
✓ Gebruik Grid voor 2D-lay-outs
Flexbox bestuurt één as tegelijk (rij OF kolom). Voor 2D-rasters waar je gelijktijdig rijen en kolommen moet beheren, gebruik CSS Grid.
❓ Veelgestelde vragen
Wanneer Flexbox gebruiken in plaats van CSS Grid?
Flexbox is ideaal voor 1D-lay-outs — items langs een enkele rij of kolom distribueren (navigatiebalken, knoepgroepen, formulierrijen). CSS Grid blinkt uit in 2D-lay-outs waarbij je gelijktijdig rijen en kolommen bestuurt.
Wat doet flex-wrap: wrap?
Standaard worden flex-items gedwongen in één rij, zelfs als ze overlopen. flex-wrap: wrap laat items naar de volgende rij gaan wanneer ze overlopen — essentieel voor responsieve lay-outs.
Wat is het verschil tussen align-items en align-content?
align-items lijnt flex-items uit op één regel (kruisas). align-content is alleen van toepassing wanneer er meerdere regels zijn (flex-wrap: wrap) en bestuurt de distributie van die regels in de container.
Hoe kolommen van gelijke breedte maken met Flexbox?
Pas flex: 1 toe op elk flex-kind. Dit laat ze gelijkmatig groeien om de beschikbare ruimte te vullen. Gebruik flex: 0 0 33.33% voor precies 3 gelijke kolommen ongeacht de inhoud.