CSS Flexbox Generator — Visuele Layout Editor Online

Flexbox Generator

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

Aantal items: 5

CSS-code

Kant-en-klare Flexbox Layouts

Naam	Beschrijving	Instellingen
Inhoud Centreren	Centreer op beide assen	`row \| center \| center`
Gelijk Verdelen	Verdeel met tussenruimte	`row \| space-between \| center`
Verticale Stapel	Verticale kolom	`column \| flex-start \| stretch`
Navigatiebalk	Horizontale navigatie	`row \| space-around \| center`
Raster Layout	Raster met wrap	`row \| flex-start \| flex-start`
Kaarten Layout	Kaarten met gap	`row \| center \| stretch`
Voettekst Layout	Voettekst space-between	`row \| space-between \| flex-end`
Zijbalk Layout	Zijpaneel	`row \| flex-start \| stretch`

Flexbox Eigenschappen

Container Eigenschappen

Flex container eigenschappen voor het besturen van de layout.

display: flex — activates flexbox for the container
flex-direction — main axis direction (row, column, row-reverse, column-reverse)
justify-content — alignment along the main axis (flex-start, center, space-between, space-around)
align-items — alignment along the cross axis (flex-start, center, stretch, baseline)
flex-wrap — wrapping items to a new line (nowrap, wrap, wrap-reverse)
gap — spacing between flex items
align-content — alignment of rows when wrapping

Item Eigenschappen

Eigenschappen van individuele flex items.

flex-grow — growth factor of the item (0, 1, 2...)
flex-shrink — shrink factor of the item (0, 1, 2...)
flex-basis — base size of the item (auto, px, %, em)
flex — shorthand for grow, shrink, basis
align-self — individual alignment of the item
order — display order of the item

Gebruiksscenario's

🎨 Navigatie en Header

Horizontale menu's
Mobiele menu's
Breadcrumbs
Sticky header
Dropdown menu's
Responsieve navigatie

Kaarten en Raster

Productkaarten
Blog previews
Afbeeldingsgalerijen
Prijstabellen
Teamkaarten
Portfolio raster

Pagina Layouts

Holy Grail Layout
Zijbalk layout
Voettekst
Hero secties
Split-screen
Dashboard

🔧 Formulieren en UI Componenten

Input groepen
Knopgroepen
Zoekbalken
Tags en badges
Modalen
Toast meldingen

Veelgestelde Vragen

Wat is het verschil tussen justify-content en align-items?

justify-content bestuurt de hoofdas, align-items de dwarsas.

Wanneer flex-wrap: wrap gebruiken?

Wanneer items niet op één regel passen en moeten wrappen.

Wat is gap bij Flexbox?

gap maakt ruimte tussen items zonder margin. Ondersteund sinds 2021.

Hoe centreer ik een element?

display: flex; justify-content: center; align-items: center;

Flexbox of Grid?

Flexbox voor eendimensionaal, Grid voor tweedimensionaal. Ze vullen elkaar aan.

Ondersteunen oude browsers Flexbox?

Sinds 2015 in alle browsers (IE10+).

CSS Flexbox Generator — Interactieve Visuele Editor

Gratis online CSS Flexbox generator met visuele editor voor responsieve layouts.

Flexbox voor Moderne Layouts

Flexbox is een eendimensionaal layout systeem in CSS. Sinds 2015 standaard voor navigatie en UI componenten.

justify-content en align-items zijn de belangrijkste positioneringseigenschappen.

Container Eigenschappen

flex-direction bepaalt de richting van de hoofdas.

flex-wrap bestuurt het wrappen. Belangrijk voor responsieve rasters.

gap maakt ruimte zonder margin.

Item Eigenschappen

flex-grow breidt items proportioneel uit.

flex-basis stelt de basisgrootte in. flex: 1 is de populairste shorthand.

Populaire Flexbox Patronen

Center Content centreert op beide assen — de eenvoudigste CSS centrering.

Navigation Bar met space-between voor horizontale menu's.

Voordelen van de Generator

Interactief voorbeeld toont resultaten in realtime.

Maak professionele Flexbox layouts met de gratis visuele online generator.

Gerelateerde rekenmachines

Kleurenpalet generator

Harmonieuze kleurenschema's voor ontwerp, websites en branding

Openen →

CSS Border Radius Generator

Visuele editor voor het maken van afgeronde hoeken, cirkels en organische vormen met CSS

Openen →

CSS Box Shadow Generator

Visuele schaduw-editor met meerdere lagen en CSS-code export

Openen →

CSS Verloop Generator

Visuele editor voor lineaire, radiale en conische verlopen met CSS-code export

Openen →

Disclaimer: alle berekeningen op deze site zijn bij benadering en worden ter informatie verstrekt. Resultaten kunnen afwijken van werkelijke afhankelijk van individuele omstandigheden, technische specificaties, regio, wetgevingswijzigingen, enz.

Financiële, medische, bouw-, nuts-, automobiel-, wiskundige, educatieve en IT rekenmachines zijn geen professioneel advies en kunnen niet de enige basis zijn voor het nemen van belangrijke beslissingen. Voor nauwkeurige berekeningen en advies raden we aan om gespecialiseerde professionals te raadplegen.

De site administratie draagt geen verantwoordelijkheid voor mogelijke fouten of schade gerelateerd aan het gebruik van berekeningsresultaten.