Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis CSS-flexboxgenerator

Experimenteer met flex-richting, wrap, justify en align op live-items — en kopieer de CSS.

Werkt offline na het laden
Voorinstellingen

Tip: klik op een item in het voorbeeld om flex-grow: 1 erop in-/uit te schakelen.

Live-voorbeeld
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Alles draait in je browser — niets wordt geüpload.

Hoe het werkt

Een interactieve flexbox-speeltuin: wissel flex-direction, wrap, justify-content en align-items en zie tot 10 live items direct herschikken. Klik op een item om het flex-grow: 1 te geven en te zien hoe het ruimte inneemt. De CSS wordt live bijgewerkt, klaar om naar je project te kopiëren.

  1. 1
    Stel de container in
    Richting, regelafbreking, justify-content, align-items, tussenruimte.
  2. 2
    Voeg items toe
    Eén tot tien genummerde flex-items.
  3. 3
    Experimenteer
    Klik op een item om flex-grow aan of uit te zetten en het effect te zien.
  4. 4
    Kopieer de CSS
    De regels voor de container (en het item), klaar om te plakken.

Alles draait in je browser — er wordt niets geüpload.

Gerelateerde tools

🟦

CSS-rastergenerator

Ontwerp visueel een CSS-raster — tracks, eenheden en tussenruimtes — en kopieer de gegenereerde CSS en HTML.

Probeer het
🌈

CSS-verloopgenerator

Maak lineaire, radiale en conische CSS-verlopen met een livevoorvertoning. Kopieer de CSS met één klik.

Probeer het
🎨

CSS box-shadow-generator

Visuele bouwer voor CSS box-shadow met livevoorvertoning, meerdere lagen, kleurkiezer, inset-schakelaar en kopiëren met één klik. Inclusief presets voor Material, neumorfisme en gloei.

Probeer het

Veelgestelde vragen