CSS flexbox generátor
Vizuálne vytvorte flex kontajner a jeho položky, potom skopírujte CSS, Tailwind triedy alebo vložený štýl.
CSS flexbox generátor
Nastavte flex-direction, flex-wrap, justify-content, align-items a align-content pomocou rozbaľovacích ponúk, pridajte medzeru v ľubovoľnej jednotke a tento nástroj vám napíše pravidlo flex kontajnera — spolu s zodpovedajúcim pravidlom pre jeho položky a malým textovým náhľadom ukazujúcim, ako sú boxy zarovnané. Použite ho na skicovanie navigačného pruhu, riadku kariet, lišty formulára alebo ľubovoľného rozloženia, ktoré potrebuje položky distribuovať, zacentrovať alebo zalamovať bez potreby úplnej mriežky.
Ovládacie prvky položiek aplikujú flex-grow, flex-shrink a flex-basis jednotne v počte položiek, ktoré ste si vybrali, čo je presne to, ako funguje väčšina skutočných flex riadkov: jedna trieda položiek riadiaca niekoľko boxov namiesto jednotlivých hodnôt na box. Align-content sa objavuje vo výstupe iba vtedy, keď je flex-wrap nastavený na zalamovanie alebo zalamovanie-odzadu, pretože prehliadače ho inak ignorujú — nástroj nikdy nevypíše deklaráciu, ktorá nič nerobí.
Vyberte si formát výstupu, ktorý zodpovedá tomu, ako budujete: priame CSS pre štýlopis, Tailwind utility triedy (zátvorky s ľubovoľnými hodnotami pokrývajú medzery a bázy, ktoré nezapadajú do predvolenej stupnice medzerovania), alebo atribút inline style pre rýchly návrh alebo značkovanie bezpečné pre e-mail. Každá hodnota sa aktualizuje v momente, keď zmeníte možnosť, a náhľad rozloženia sa s ním prekreslí — žiadny krok zostavania, žiadne externé CSS na načítanie.
Všetko beží lokálne vo vašom prehliadači; ničoho, čo tu nakonfigurujete, sa nikam neumiestňuje. Keď CSS vyzerá správne, skopírujte ho, stiahnite si ho ako súbor .txt alebo pošlite ho späť do vstupu, aby ste pokračovali v iterácii s iným nástrojom.