Generator CSS flexbox
Wizualnie utwórz kontener flex i jego elementy, a następnie skopiuj CSS, klasy Tailwind lub styl wbudowany.
Generator CSS flexbox
Ustaw flex-direction, flex-wrap, justify-content, align-items i align-content za pomocą rozwijanych menu, dodaj odstęp w dowolnej jednostce, a to narzędzie napisze dla ciebie regułę flex kontejnera — wraz z pasującą regułą dla jego elementów i małym podglądem tekstowym pokazującym, jak wyrównane są pola. Użyj go do szkicowania paska nawigacyjnego, rzędu kart, paska formularza lub dowolnego układu, który potrzebuje rozprowadzić, wyśrodkować lub zawinąć elementy bez całej siatki.
Sterowania elementów stosują flex-grow, flex-shrink i flex-basis równomiernie w liczbie wybranych elementów, co jest dokładnie tym, jak funkcjonuje większość rzeczywistych rzędów flex: jedna klasa elementu sterująca kilkoma polami zamiast poszczególnych wartości na pole. Align-content pojawia się na wyjściu tylko wtedy, gdy flex-wrap jest ustawiony na zawijanie lub zawijanie-odwrotnie, ponieważ przeglądarki w przeciwnym razie go ignorują — narzędzie nigdy nie wydrukuje deklaracji, która nic nie robi.
Wybierz format wyjścia, który pasuje do tego, jak budujesz: zwykły CSS dla arkusza stylów, klasy narzędziowe Tailwind (nawiasy z wartościami arbitralnymi obejmują odstępy i podstawy, które nie mieszczą się w domyślnej skali odstępów), lub atrybut stylu wbudowanego do szybkiego prototypu lub znaczników bezpiecznych dla poczty e-mail. Każda wartość aktualizuje się w momencie zmiany opcji, a podgląd układu jest przerysowywany wraz z nią — żaden krok kompilacji, żaden zewnętrzny CSS do załadowania.
Wszystko działa lokalnie w twojej przeglądarce; nic z tego, co tutaj skonfigurujesz, nie jest wysyłane nigdzie. Gdy CSS wygląda dobrze, skopiuj go, pobierz jako plik .txt lub wyślij z powrotem do wejścia, aby kontynuować iterację z innym narzędziem.