CSS flexbox generátor
Vizuálně vytvořte flex kontejner a jeho položky, poté zkopírujte CSS, Tailwind třídy nebo vložený styl.
CSS flexbox generátor
Nastavte flex-direction, flex-wrap, justify-content, align-items a align-content pomocí rozbalovacích nabídek, přidejte mezeru v libovolné jednotce a tento nástroj vám napíše pravidlo flex kontejneru — spolu s odpovídajícím pravidlem pro jeho položky a malým textovým náhledem ukazujícím, jak jsou boxy zarovnány. Použijte jej na skicování navigačního pruhu, řady karet, lišty formuláře nebo jakéhokoli rozložení, které potřebuje položky distribuovat, vycentrovat nebo zalomit bez potřeby úplné mřížky.
Ovládací prvky položek aplikují flex-grow, flex-shrink a flex-basis jednotně v počtu položek, které jste si vybrali, což je přesně to, jak funguje většina skutečných flex řad: jedna třída položky řídící několik boxů místo jednotlivých hodnot na box. Align-content se objevuje na výstupu pouze tehdy, když je flex-wrap nastaven na zalomení nebo zalomení-pozpátku, protože prohlížeče jej jinak ignorují — nástroj nikdy nevypíše deklaraci, která nic nedělá.
Vyberte si formát výstupu, který odpovídá tomu, jak stavíte: jednoduché CSS pro stylopis, Tailwind utility třídy (závorky s libovolnými hodnotami pokrývají mezery a báze, které nezapadají do výchozího měřítka rozestupu), nebo atribut inline style pro rychlý návrh nebo značku bezpečnou pro e-mail. Každá hodnota se aktualizuje v okamžiku, kdy změníte možnost, a náhled rozložení se s ní překreslí — žádný krok sestavení, žádné externí CSS k načítání.
Všechno běží lokálně ve vašem prohlížeči; nic, co zde nakonfigurujete, se nikam neodesílá. Když CSS vypadá správně, zkopírujte jej, stáhněte jej jako soubor .txt nebo jej pošlete zpět na vstup, abyste pokračovali v iteraci s jiným nástrojem.