.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Wat is de Flexbox Generator?
De Flexbox Generator is een visuele speeltuin voor CSS Flexibele Box Layout U stelt de eigenschappen van de container in met knoppen en schuifregelaars, kijkt naar een live preview, herschikt de items in realtime en kopieert de exacte CSS die de preview gebruikt Het verwijdert het giswerk van het onthouden welke eigenschap wat doet, zodat u een rij, een kolom, een gecentreerde lay-out of een inpakraster van kaarten kunt bouwen zonder vallen en opstaan in de browserontwikkeltools.
Flexbox is een eendimensionaal lay-outmodel: items worden langs een hoofdas aangelegd en op de dwarsas uitgelijnd De container drijft bijna alles door zes eigenschappen heen Flex-direction kiest de hoofdas en of deze vooruit of achteruit loopt.justite-content verdeelt vrije ruimte langs de hoofdas.lijn-items positioneert items op de dwarsas. Flex-wrap beslist of items overstromen naar nieuwe lijnen, en lijn-content spaties die uit elkaar liggen zodra de wikkeling is ingeschakeld. gap voegt consistente afstand toe tussen items zonder marges.
Deze tool legt al deze eigenschappen op één plek bloot en toont het resultaat onmiddellijk. Omdat het voorbeeld wordt weergegeven met dezelfde declaraties die in het uitvoervak verschijnen, ziet u precies wat u krijgt als u de CSS in uw stylesheet plakt. De gegenereerde regel richt zich standaard op een .container-klasse en vermeldt alleen de eigenschappen die er toe doen, inclusief align-content alleen als wrapping is ingeschakeld, aangezien dit geen effect heeft op een enkele regel.
Alles draait volledig in uw browser Er is geen aanmelding, er wordt niets geüpload en de tool blijft offline werken zodra de pagina is geladen. Het is net zo nuttig als leermiddel om te begrijpen hoe de flex-eigenschappen op elkaar inwerken en als een snelle manier om productieklare CSS te produceren. Verander het aantal preview-items, wijzig de grootte van de container in je hoofd en lees de verklaring af die de gewenste uitlijning oplevert, of dat nu een navbar-spread is met ruimte ertussen of een heldensectie die perfect op beide assen is gecentreerd.
Hoe de Flexbox Generator gebruiken?
Kies richting en wrap
Kies de flexrichting en of items op meerdere lijnen moeten worden verpakt.
Uitlijning instellen
Pas de justify-inhoud op de hoofdas aan en lijn items op de dwarsas uit totdat het voorbeeld overeenkomt met uw lay-out.
Afstemmingspatiëring
Stel de opening in tussen items en, wanneer de verpakking is ingeschakeld, de uitlijninhoud die de lijnen uit elkaar zet.
Kopieer de CSS
De gegenereerde regel wordt live bijgewerkt Kopieer het in één klik en plak het in uw stylesheet.
Belangrijkste kenmerken
Live voorbeeld
Een container met voorbeelditems wordt onmiddellijk opnieuw weergegeven terwijl u van eigenschap verandert, zodat u de lay-out ziet voordat u code kopieert
Elke Container Property
Controlevertoning, flex-richting, flex-wrap, rechtvaardigen-inhoud, lijn-items, lijn-inhoud en kloof van één paneel
Wat je ziet is wat je krijgt
De preview gebruikt dezelfde declaraties als de uitvoer, dus de gekopieerde CSS produceert precies de lay-out op het scherm
Schoon, minimale uitvoer
De gegenereerde regel vermeldt alleen betekenisvolle eigenschappen en laat de uitlijninhoud weg totdat de verpakking is ingeschakeld
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!