CSS flexbox-generator
Maak visueel een flex-container en zijn items, kopieer vervolgens de CSS, Tailwind-klassen of inline-stijl.
CSS flexbox-generator
Stel flex-direction, flex-wrap, justify-content, align-items en align-content in met dropdown-menu's, voeg een gat in willekeurige eenheden toe, en deze tool schrijft de flex-container-regel voor je — samen met een overeenkomstige regel voor de items en een kleine tekstvoorbeeld die laat zien hoe de vakken zijn ingedeeld. Gebruik het om een navigatiebalk, een kartenrij, een formulierwerkbalk of elke lay-out te schetsen die items nodig heeft die verdeeld, gecentreerd of omwikkeld moeten worden zonder een volledig grid.
De item-instellingen passen flex-grow, flex-shrink en flex-basis gelijkmatig toe op het aantal items dat je kiest — precies zoals echte flex-rijen werken: één item-klasse die meerdere vakken bestuurt in plaats van per-item waarden. Align-content verschijnt alleen in de uitvoer wanneer flex-wrap is ingesteld op wrap of wrap-reverse, omdat browsers het anders negeren — de tool geeft nooit een declaratie uit die niets doet.
Kies het uitvoerformat dat aansluit bij hoe je bouwt: gewone CSS voor een stylesheet, Tailwind utility-klassen (willekeurige-waarde-haakjes dekken gaten en basen af die niet op de standaard spacing-schaal passen), of een inline style-attribuut voor een snelle prototype of e-mail-veilige markup. Elke waarde wordt bijgewerkt zodra je een optie wijzigt, en de lay-outvoorbeeld wordt er samen mee opnieuw getekend — geen build-stap, geen externe CSS om te laden.
Alles draait lokaal in je browser; niets wat je hier configureert, wordt ergens anders verzonden. Wanneer de CSS er goed uitziet, kopieer het, download het als een .txt-bestand, of stuur het terug naar de invoer om met een ander hulpmiddel verder te gaan.