Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Aantal items: 5

Live voorbeeld

Gegenereerde CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

Over deze tool

De CSS Flexbox Generator laat je visueel een flex container configureren door alle belangrijke flexbox eigenschappen aan te passen — flex-direction, flex-wrap, justify-content, align-items en align-content.

Flexbox is een CSS-lay-outmodule ontworpen voor eendimensionale lay-outs (rijen of kolommen). Begrijpen hoe elke eigenschap samenwerkt is cruciaal voor het bouwen van responsieve UI's.

Hoe te gebruiken

Pas flex-direction aan om de hoofdas (rij of kolom) te bepalen.
Stel flex-wrap in om te bepalen of items naar de volgende regel overlopen.
Gebruik justify-content om items langs de hoofdas te verdelen.
Gebruik align-items om items langs de dwarsas uit te lijnen.
Wijzig het aantal voorbeelditems met de schuifregelaar.
Klik Kopiëren om de gegenereerde CSS te kopiëren.

Gebruiksscenario's

Frontend-ontwikkelaars prototypen snel navigatiebalken, kaartgrids en werkbalken. CSS-beginners leren visueel hoe flexbox-eigenschappen werken. Ontwerpers verifiëren dat lay-outconcepten uitvoerbaar zijn in CSS.

Veelgestelde vragen

Wat is het verschil tussen align-items en align-content? — align-items lijnt items uit binnen één regel; align-content geldt alleen bij meerdere regels (flex-wrap ingesteld op wrap).
Werkt flexbox voor tweedimensionale lay-outs? — Flexbox is eendimensionaal. Gebruik CSS Grid voor complexe rasterlay-outs.
Wordt flexbox ondersteund in alle browsers? — Ja. Flexbox heeft volledige ondersteuning in alle moderne browsers waaronder Chrome, Firefox, Safari en Edge.