CSS-flexboxgenerator
Maak CSS-flexboxlay-outs op visuele wijze. Bekijk het resultaat in realtime terwijl u de richting, uitlijning, regelafbreking en tussenruimte aanpast.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Hoe u deze tool gebruikt
- 1
Pick values from the four dropdowns: flex-direction, justify-content, align-items, and flex-wrap.
- 2
Drag the gap slider to set the spacing between items, from 0 to 40 pixels.
- 3
Watch the live preview of four numbered boxes update instantly to reflect each change.
- 4
Click 'Copy CSS' to copy the generated declaration block, then paste it onto your own flex container.
Wat is de CSS-flexboxgenerator?
Flexbox is de moderne manier om elementen in CSS te verdelen, veel eenvoudiger dan floats of absolute positionering. De eigenschappen zijn: flex-direction (rij of kolom), justify-content (uitlijning op de hoofdas), align-items (kruisas), flex-wrap en gap. Deze tool stelt ze allemaal beschikbaar met een voorvertoning in realtime.
Veelvoorkomende toepassingen
Aligning a horizontal navigation bar so links sit at flex-start and a logo or button pushes to flex-end with space-between.
Centering a single element both horizontally and vertically using justify-content: center and align-items: center.
Spacing a row of buttons or tags evenly with a fixed gap instead of fragile margins.
Stacking form fields vertically by switching flex-direction to column while keeping consistent gap spacing.
Letting a row of cards wrap onto new lines on narrow screens with flex-wrap: wrap.
Learning how justify-content and align-items behave by toggling values and watching the live preview before committing the code.
Veelgestelde vragen
Flexbox of Grid?▼
Gerelateerde tools
Kleurconverter (HEX/RGB/HSL)
Zet kleuren om tussen de formaten HEX, RGB en HSL. Kies een kleur visueel of voer de waarden handmatig in.
CSS box-shadow-generator
Maak box-shadow-waarden in CSS op een visuele manier. Bekijk een realtime voorvertoning en kopieer de gegenereerde CSS.
CSS-verloopgenerator
Maak lineaire en radiale CSS-verlopen. Kies de kleuren op visuele wijze en kopieer de gegenereerde CSS.
Cubic-bezier-versnellingscurvegenerator
Maak cubic-bezier-versnellingscurves voor CSS. Inclusief standaard voorinstellingen.
Kleurpaletgenerator
Genereer harmonieuze kleurpaletten op basis van een willekeurige basiskleur. Ondersteunt complementaire, analoge, triadische en monochromatische schema's.
CSS border-radius-generator
Maak complexe border-radius-waarden in CSS op een visuele manier. Onafhankelijke controle over elke hoek.