Plac zabaw Flexbox

Wszystkie narzędzia

Eksperymentuj z właściwościami CSS Flexbox na żywych elementach i kopiuj wygenerowany CSS układu.

Podgląd Kliknij element, aby go edytować
Wygenerowany CSS
—

Wszystko działa w Twojej przeglądarce — nic nie jest przesyłane.

Kontener
12px
Elementy
0
Wybrany element

O Plac zabaw Flexbox

Flexbox Playground to praktyczny plac zabaw dla CSS flexbox. Ustaw właściwości kontenera — flex-direction, flex-wrap, justify-content, align-items, align-content i gap — i obserwuj, jak do 12 aktywnych elementów przeukłada się w podglądzie przy każdej zmianie wartości. To najszybszy sposób, by naprawdę zrozumieć działanie każdej właściwości.

Elementy można edytować pojedynczo: kliknij jeden, aby go zaznaczyć, i dostosuj jego flex-grow, flex-shrink, flex-basis, align-self oraz order. Obserwowanie, jak jeden element rośnie, pochłaniając wolne miejsce, podczas gdy sąsiednie zachowują swoją szerokość, uczy modelu rozmiaru flex szybciej niż jakikolwiek diagram.

Plac zabaw generuje czysty CSS dla kontenera oraz dla wszystkich elementów z ustawieniami innymi niż domyślne — skopiuj go bezpośrednio do arkusza stylów. Wszystko działa w Twojej przeglądarce, bez przesyłania czegokolwiek, a przycisk resetu przywraca czysty stan początkowy.

Jak korzystać z Plac zabaw Flexbox

  1. Ustaw flex-direction, wrap, justify-content, align-items, align-content i gap kontenera.
  2. Dodaj lub usuń elementy — od 2 do 12 — aby odzwierciedlić swój rzeczywisty komponent.
  3. Kliknij element i dostosuj jego grow, shrink, basis, align-self i order.
  4. Obserwuj aktualizację podglądu na żywo przy każdej zmianie.
  5. Skopiuj wygenerowany CSS i wklej go do swojego projektu.

Najczęściej zadawane pytania

flex-grow rozdziela wolną przestrzeń: element z grow 2 otrzymuje dwa razy więcej dodatkowego miejsca niż ten z grow 1. flex-shrink działa odwrotnie, gdy miejsca brakuje. Obie wartości to proporcje między elementami sąsiednimi, a nie rozmiary bezwzględne.

align-items pozycjonuje elementy wzdłuż osi poprzecznej w obrębie ich linii. align-content rozmieszcza wiele zawiniętych linii wewnątrz kontenera — ma widoczny efekt tylko wtedy, gdy flex-wrap tworzy więcej niż jedną linię.

Każdy element flex domyślnie ma order 0; elementy są rozmieszczane od najniższej do najwyższej wartości order. Zmiana wartości order elementu przenosi go wizualnie bez ingerowania w HTML — kolejność w DOM, a więc i kolejność odczytu przez czytniki ekranu, pozostaje bez zmian.

Tak. Wygenerowany CSS obejmuje reguły kontenera oraz selektor dla każdego elementu, którego grow, shrink, basis, align-self lub order różni się od wartości domyślnej, dzięki czemu możesz wkleić kompletny, działający układ.

Tak — darmowy, bez rejestracji i w całości działający po stronie klienta. Twoje eksperymenty nigdy nie opuszczają karty przeglądarki.
Udostępnij
Powiązane narzędzia
Kreator podpisu e-mail Zaprojektuj profesjonalny podpis HTML do e-maila korzystając z 30 szablonów, dostosuj go i zapisz. Bezpłatnie
Ikona do PNG Konwertuj Bootstrap Icons, Font Awesome i inne na niestandardowe obrazy PNG — bezpłatnie, w przeglądarce. Bezpłatnie
Generator ikon aplikacji Wygeneruj kompletny, gotowy do publikacji zestaw ikon aplikacji dla App Store i Google Play — eleganckie tła gradientowe, siatkowe i wzorzyste, zbudowane z Twojego logo. Bezpłatnie
Generator faviconów Zbuduj kompletny pakiet faviconów z logo, ikony czcionkowej lub monogramu — favicon.ico, nowoczesne pliki PNG, ikona Apple touch, ikony PWA, manifest webowy i fragment HTML. Bezpłatnie
Generator cieni CSS box-shadow Twórz warstwowe cienie CSS box-shadow z suwakami do przesunięcia, rozmycia, rozrostu, koloru, krycia i wcięcia — podgląd na prawdziwym elemencie i gotowy CSS do skopiowania. Bezpłatnie
Generator zaokrągleń CSS (border-radius) Twórz wizualnie border-radius CSS z podglądem na żywo i kopiuj gotowy do użycia kod. Bezpłatnie
Popularne wyszukiwania
plac zabaw flexbox generator css flexbox generator kontenera flex narzędzie justify-content align-items generator układu flex css wizualizator flexbox generator kodu flexbox
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.