CSS Flexbox Generator Online — Visuele Layout Editor

Gratis professionele CSS Flexbox generator met interactieve visuele editor. Configureer alle flex eigenschappen en krijg kant-en-klare CSS-code

Flexbox Generator
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

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.