6XC

CSS Flexbox-speeltuin

Stel flex-direction, justify-content, align-items, wrap en gap live af op vakken en kopieer daarna de container-CSS.

847 weergaven

1
2
3
4
5

Flexbox in het kort

display: flex maakt van een container een eendimensionale lay-outmachine. justify-content verdeelt items langs de hoofdas, align-items lijnt ze uit op de dwarsas, flex-direction kiest de as, en gap geeft ruimte tussen items zonder marges. Speel met de besturingselementen en bekijk hoe de genummerde vakken live herschikken.

Veelgestelde vragen

Hoe centreer ik iets perfect?

De beroemde drie regels: display: flex; justify-content: center; align-items: center; — horizontaal en verticaal centreren in één keer.

Flexbox of Grid?

Flexbox blinkt uit in eendimensionale rijen of kolommen die zich aanpassen aan de inhoud (werkbalken, navigatie, kaartrijen). Grid is gebouwd voor tweedimensionale lay-outs met expliciete tracks. Ze combineren goed.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren