Flexbox Editor
Gratis online Flexbox-layout-editor, visueel realtime voorbeeld
Flexbox-eigenschappenreferentie
flex-direction: row | column | row-reverse | column-reverse. justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly. align-items: stretch | flex-start | center | flex-end | baseline. flex-wrap: nowrap | wrap. gap: spatiëring tussen items.
De Flexbox-editor gebruiken
Pas de flex-container-eigenschappen aan met de bedieningselementen. De preview toont in realtime hoe items worden gerangschikt. Voeg items toe of verwijder ze om verschillende configuraties te testen. Kopieer de gegenereerde CSS voor uw project.
▶Wat is het verschil tussen justify-content en align-items?
justify-content bepaalt de uitlijning langs de hoofd-as (horizontaal bij row, verticaal bij column). align-items bepaalt de uitlijning langs de dwars-as (loodrecht op de hoofd-as).
▶Hoe centreer ik een element met Flexbox?
Stel het bovenliggende element in op display: flex; justify-content: center; align-items: center;. Dit centreert het onderliggende element zowel horizontaal als verticaal.
▶Wat doet flex-wrap?
Standaard proberen flex-items op één regel te passen (nowrap). Met flex-wrap: wrap kunnen items naar de volgende regel vloeien wanneer de ruimte opraakt.