DARMOWE NARZĘDZIE

Flexbox Align/Justify Sandbox

Interaktywna piaskownica do testowania align-items, justify-content i wszystkich właściwości CSS Flexbox. Podgląd z kodem CSS. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Kierunek (flex-direction)

Wyrównanie głównej osi (justify-content)

Wyrównanie poprzeczne (align-items)

Zawijanie (flex-wrap)

Wyrównanie wierszy (align-content)

Własne wyrównanie elementu (align-self)

Odstęp między elementami — gap (px)

Padding kontenera (px)

Szerokość kontenera (px)

Wysokość kontenera (px)

Rozmiar elementu (px)

Liczba

Highlight

Show axes Opcja narzędzia

Extra css

79 znaków

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Piaskownica CSS Flexbox online

Zamiast zgadywać jak zachowają się align-items i justify-content – przetestuj je na żywo. Piaskownica pozwala zmieniać wszystkie właściwości Flexbox i natychmiast widzieć efekt.

Flexbox sandbox align-items justify-content CSS Flexbox interaktywny

Właściwości do testowania

flex-direction, justify-content (6 wartości), align-items (5 wartości), align-content, flex-wrap, gap, order i flex dla każdego elementu potomnego.

Podgląd na żywo

Dodaj i usuń elementy potomne, zmień ich rozmiary, obserwuj jak reaguje układ. Kod CSS aktualizuje się w czasie rzeczywistym.

Najczęstsze pytania

Czym różni się od generatora CSS Flexbox?

Generator tworzy gotowy kod do skopiowania; piaskownica służy do nauki i eksperymentowania.

Jak wyśrodkować element pionowo i poziomo?

justify-content: center + align-items: center na rodzicu z display: flex.

Czy mogę eksportować kod?

Tak – przycisk Kopiuj CSS eksportuje aktualną konfigurację.

Inne narzędzia CSS: piaskownica CSS Grid i generator CSS Flexbox.