⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

CSS Flexbox-generator

Bouw visueel een CSS-flexbox-lay-out: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus voor elke child flex-grow, flex-shrink en flex-basis, allemaal met een live voorbeeld en kopieerbare CSS.

🔒 Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.

Verwerken... 0%

Resultaat

Een flexbox-lay-out heeft twee aparte regelboeken — eigenschappen op de container (flex-direction, justify-content, align-items, flex-wrap, gap) en eigenschappen op elke child (flex-grow, flex-shrink, flex-basis) — en ze door elkaar halen is de meestvoorkomende oorzaak van bugs in de trant van "waarom centreert / groeit / wrapt dit niet zoals ik verwacht". Deze generator zet beide regelboeken tegelijk op het scherm: verander een containerinstelling of de velden van een child en drie genummerde, met kleur gemarkeerde vakken updaten meteen, zodat oorzaak en gevolg zichtbaar blijven.

De containerzijde dekt elke lay-outas: kies een richting, bepaal hoe children over de hoofdas worden verdeeld met justify-content, lijn ze uit op de kruisas, beslis of ze naar nieuwe regels wrappen, en stel een gap in in plaats van margin-hacks ertussen. De childzijde is net zo echt: voeg vakken toe tot acht, verwijder tot twee, en geef ze elk hun eigen flex-grow, flex-shrink en flex-basis — de generator schrijft alleen een per-child CSS-regel wanneer ten minste één daarvan afwijkt van de browserstandaard, dus de gekopieerde code vult zichzelf nooit op met flex-grow: 0 op vakken die dat niet nodig hebben.

Vooraf ingestelde pagina's springen rechtstreeks naar de lay-outs waar mensen bij naam naar zoeken: hoe centreer je een div (de meestgestelde CSS-lay-outvraag, opgelost met justify-content én align-items beide op center), een navbar met logo links en links rechts, gelijkbrede flexibele kolommen via flex-grow, en een zij-aan-zijvergelijking van space-between met zijn naaste verwanten space-around en space-evenly.

Net als elke tool op deze site is de generator gratis en draait hij volledig in je browser: geen upload, geen account, en hij blijft offline werken zodra de pagina geladen is.

Geniet je van dit hulpmiddel? Denkt u dat dit product nuttig is? Zie je er potentieel in en wil je het ondersteunen?

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Containerinstellingen: flex-direction, justify-content, align-items, flex-wrap en een gap-invoer in pixels, live toegepast op het voorbeeld.
  • Standaard drie met kleur gemarkeerde child-vakken (voeg er tot acht toe, verwijder tot twee), elk met eigen velden voor flex-grow, flex-shrink en flex-basis.
  • Kopieerbaar CSS-blok met een .flex-container-regel plus één .flex-item-N-regel per child die afwijkende flex-eigenschappen heeft.

Belangrijkste voordelen

✓ Elke containerinstelling en elke flex-grow, flex-shrink en flex-basis van een child werken live bij op drie genummerde voorbeeldvakken, zodat je precies ziet wat je flexbox-regels doen voordat je een stylesheet aanraakt.
✓ De generator schrijft alleen child-regels die echt afwijken van de CSS-standaardwaarden, zodat de gekopieerde code kort en leesbaar blijft in plaats van op elk vak opnieuw flex-grow: 0 te zetten.
✓ Vooraf ingestelde pagina's lossen de lay-outs op waar mensen bij naam naar zoeken: een div centreren, een navbar met logo links en links rechts, en gelijkbrede flexibele kolommen — open er een en de tool is al geconfigureerd.

Toepassingen

  • • Krijg de exacte CSS om een div zowel horizontaal als verticaal te centreren door in de live preview te zien hoe justify-content en align-items op de vakken werken.
  • • Bouw een navbar met het logo links en de links rechts met space-between en align-items: center, en kopieer de container-CSS rechtstreeks naar je headercomponent.
  • • Vergelijk space-between, space-around en space-evenly tegelijkertijd op dezelfde drie vakken in plaats van te gokken welke de gewenste tussenruimte geeft.