Piaskownica Flexbox
Wizualnie testuj wszystkie właściwości Flexbox: justify-content, align-items, flex-wrap, gap i inne. Podgląd na żywo, kopiuj gotowy CSS. Idealne do nauki i debugowania layoutu.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Kierunek (flex-direction)
kierunek układania elementów — od niego zależą osie
justify-content
elementy zbite na środku osi głównej
align-items
elementy wyśrodkowane na osi poprzecznej
Odstęp (gap)
stały odstęp między elementami — gap nie dodaje przestrzeni przy krawędziach kontenera
Właściwości Flexbox
Wymiary i Elementy
Właściwości Align-Self (Dla jednego elementu)
Wygenerowany Kod
/* Flex container */
.flexbox-demo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
width: 520px;
height: 280px;
padding: 12px;
box-sizing: border-box;
}
/* Demo items */
.flexbox-demo .demo-item {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 10px;
box-sizing: border-box;
}
/* Highlighted item override */
.flexbox-demo .is-highlight {
align-self: flex-end;
}
<div class="flexbox-demo"> <div class="demo-item">1</div> <div class="demo-item">2</div> <div class="demo-item is-highlight">3</div> <div class="demo-item">4</div> <div class="demo-item">5</div> <div class="demo-item">6</div> <div class="demo-item">7</div> <div class="demo-item">8</div> </div>
- Oś główna (main): pozioma (left ↔ right); Oś poprzeczna (cross): pionowa (top ↕ bottom). - justify-content ustawia elementy wzdłuż osi głównej. - align-items ustawia elementy na osi poprzecznej.
| Właściwość | Wartość | Jak rozmieszcza elementy |
|---|---|---|
| justify-content | flex-start | elementy zbite przy początku osi głównej (domyślna) |
| justify-content | flex-end | elementy zbite przy końcu osi głównej |
| justify-content | center | elementy zbite na środku osi głównej |
| justify-content | space-between | pierwszy i ostatni przy krawędziach, równe odstępy między elementami |
| justify-content | space-around | równe przestrzenie wokół elementów; przy krawędziach o połowę węższe niż między elementami |
| justify-content | space-evenly | identyczne przestrzenie między elementami i przy obu krawędziach |
| align-items | stretch | elementy rozciągnięte w poprzek, gdy nie mają tam własnego rozmiaru (domyślna) |
| align-items | flex-start | elementy przy początku osi poprzecznej |
| align-items | flex-end | elementy przy końcu osi poprzecznej |
| align-items | center | elementy wyśrodkowane na osi poprzecznej |
| align-items | baseline | wyrównanie po linii bazowej tekstu pierwszego wiersza |
Przy flex-direction: row oś główna jest pozioma, a poprzeczna pionowa; przy column osie się zamieniają — dlatego te same wartości „obracają się” razem z kierunkiem. Trzecia własność w selektorach — align-content — pojawia się dopiero przy zawijaniu (wrap) i rozmieszcza całe linie elementów, nie pojedyncze elementy.
Oś główna i poprzeczna zależą od kierunku
Nie ma sztywnych osi „pozioma/pionowa” — jest oś główna (main), wzdłuż której układają się elementy, i poprzeczna (cross). flex-direction: row układa w wierszu, column w kolumnie, a warianty -reverse odwracają kierunek. Zapamiętaj to raz, a justify/align przestaną być loterią: justify = main, align = cross.
gap a space-between/space-around
gap wstawia stały, równy odstęp między elementami (nie przy krawędziach), a warianty space-* dzielą wolne miejsce w kontenerze. Łączenie obu daje sumę odstępów — jak w podglądzie: zwiększ gap przy space-between, a zobaczysz, że elementy zaczną się mieścić ciaśniej.
align-self — wyjątek od reguły dla jednego elementu
Wyróżniony element w piaskownicy demonstruje align-self: nadpisuje align-items dla pojedynczego elementu (wartość auto = dziedzicz z kontenera). Warto pamiętać też, że stretch nie rozciągnie elementu z ustawioną wysokością — dlatego w demo elementy mają konkretny rozmiar.
Kolejność wizualna a kolejność w DOM
Warianty -reverse (i własność order) zmieniają tylko wygląd — czytniki ekranu i klawisz Tab poruszają się po oryginalnej kolejności HTML. Przy układach „od prawej” sprawdzaj nawigację klawiaturą, zanim wdrożysz reverse na elementach interaktywnych.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćPiaskownica Flexbox – wszystkie właściwości CSS w jednym miejscu
CSS Flexbox to potężny system layoutu, ale zapamiętanie różnic między justify-content a align-items, czy kiedy używać flex-grow vs flex-basis, bywa trudne. Piaskownica (playground) pozwala klikać właściwości i natychmiastowo widzieć efekt – najlepsza metoda nauki.
Właściwości kontenera Flex
display: flex | inline-flex. flex-direction: row | column | row-reverse | column-reverse. flex-wrap: nowrap | wrap | wrap-reverse. justify-content (oś główna): flex-start | flex-end | center | space-between | space-around | space-evenly. align-items (oś poprzeczna): stretch | flex-start | flex-end | center | baseline. align-content (wiele linii): jak justify-content ale dla osi poprzecznej. gap: odstęp między elementami (column-gap, row-gap).
Właściwości elementów Flex
order: kolejność wyświetlania (domyślnie 0). flex-grow: współczynnik rozrastania (0 = nie rośnie, 1 = rośnie proporcjonalnie). flex-shrink: współczynnik kurczenia (0 = nie kurczy się). flex-basis: bazowy rozmiar przed dystrybucją przestrzeni. Skrót flex: flex-grow flex-shrink flex-basis (np. flex: 1 1 auto). align-self: nadpisanie align-items dla pojedynczego elementu.
Najczęstsze wzorce Flexbox
Wyśrodkowanie pionowe i poziome: display:flex + justify-content:center + align-items:center. Pasek nawigacji: display:flex + justify-content:space-between. Karty równej wysokości: display:flex + align-items:stretch. Sticky footer: flex-direction:column + main{flex:1}. Auto margin: margin-left:auto przesuwa element na prawą stronę.
Flexbox vs CSS Grid
Flexbox: 1-wymiarowy (wiersz lub kolumna). Idealny dla nawigacji, pasków narzędzi, kart w rzędzie. Grid: 2-wymiarowy (wiersze i kolumny). Idealny dla layoutu strony, siatek galerii. Można łączyć: Grid dla layoutu strony, Flexbox dla wnętrza komponentów. Nie ma "lepszego" – oba są complementarne.
Jak działa piaskownica Flexbox od strony mechaniki
Piaskownica nie symuluje układu ani nie liczy go własnym algorytmem. Wybrane wartości są wpisywane jako style inline do prawdziwego elementu w przeglądarce, która wykonuje zwykłe przeliczenie layoutu (reflow). Dzięki temu podgląd odpowiada temu, co zobaczysz w kodzie, o ile otoczenie elementu jest takie samo. Zmiana właściwości kontenera albo elementu potomnego natychmiast przelicza pozycje i rozmiary.
Kluczem jest rozróżnienie osi. Właściwość flex-direction wyznacza oś główną i poprzeczną, a od tego zależy, która właściwość co robi: justify-content rozmieszcza elementy wzdłuż osi głównej, align-items wyrównuje je wzdłuż osi poprzecznej, a align-content rozdziela całe linie, gdy elementy się zawijają. Po przełączeniu row na column te role zamieniają się wizualnie — justify-content zaczyna działać w pionie, a align-items w poziomie.
Rozmiary wynikają z rozdzielenia wolnej przestrzeni. Najpierw każdy element dostaje rozmiar bazowy z flex-basis, a gdy ta wartość to auto, przeglądarka bierze width, height albo rozmiar treści. Jeśli suma rozmiarów bazowych i odstępów gap jest mniejsza niż kontener, nadwyżka jest dzielona proporcjonalnie do flex-grow. Jeśli jest większa, niedobór jest odejmowany proporcjonalnie do flex-shrink przemnożonego przez rozmiar bazowy. Na końcu pozycje wyznacza justify-content, przekrój — align-items lub align-content.
Przykład krok po kroku: trzech elementów w kontenerze 600 px
- Ustaw kontenerowi szerokość 600 px, display: flex i gap: 20 px. Trzem elementom nadaj flex: 0 1 100px, czyli brak rozrastania, możliwość kurczenia i bazę 100 px.
- Suma rozmiarów bazowych to 300 px, odstępy to 2 razy 20 px, razem 340 px. Wolna przestrzeń wynosi 600 odjąć 340, czyli 260 px. Przy domyślnym justify-content: flex-start te 260 px zostaje puste po prawej stronie.
- Zmień justify-content na space-between. Elementy nadal mają po 100 px, ale wolna przestrzeń dzieli się na dwa odstępy po 130 px, więc pierwszy element jest przy lewej krawędzi, a trzeci przy prawej.
- Wróć do flex-start i ustaw wszystkim elementom flex-grow: 1. Teraz 260 px wolnej przestrzeni dzieli się na trzy równe udziały po około 86,67 px, więc każdy element ma około 186,67 px.
- Ustaw flex-grow: 1 dla pierwszego i trzeciego elementu oraz flex-grow: 2 dla środkowego. Suma udziałów to 1 + 2 + 1 = 4, więc na jednostkę przypada 65 px wolnej przestrzeni.
- Wynik: pierwszy i trzeci element mają 100 + 65 = 165 px, środkowy 100 + 130 = 230 px. Kontrola sumy: 165 + 230 + 165 = 560 px plus dwa odstępy po 20 px daje dokładnie 600 px, czyli pełne wypełnienie kontenera.
Ściąga właściwości obsługiwanych w piaskownicy
| Właściwość | Przykładowe wartości | Co zmienia w podglądzie |
|---|---|---|
| display | flex, inline-flex | włącza kontekst flexbox w kontenerze; inline-flex nie łamie linii tekstu wokół kontenera |
| flex-direction | row, column, row-reverse, column-reverse | wyznacza oś główną i kierunek; zamienia działanie justify-content z align-items |
| flex-wrap | nowrap, wrap, wrap-reverse | decyduje, czy elementy przechodzą do kolejnych linii i w którą stronę |
| justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly | rozmieszczenie elementów wzdłuż osi głównej, bez zmiany ich rozmiarów |
| align-items | stretch, flex-start, flex-end, center, baseline | wyrównanie elementów wzdłuż osi poprzestnej w pojedynczej linii |
| align-content | wartości jak w justify-content | rozmieszczenie wielu linii; działa tylko przy flex-wrap: wrap i co najmniej dwóch liniach |
| gap | column-gap, row-gap, gap | odstęp między elementami i liniami; nie dodaje odstępu na brzegach kontenera |
| flex (skrót) | flex-grow flex-shrink flex-basis, np. 1 1 auto | rozmiar bazowy elementu i jego udział w dzieleniu wolnej przestrzeni |
Jak korzystać z piaskownicy, żeby faktycznie się nauczyć
- Zmieniaj jedną właściwość naraz — po każdej zmianie patrz na podgląd i zapamiętaj efekt z osobna; dopiero potem łącz właściwości, bo złożona konfiguracja maskuje, która reguła zadziałała.
- Testuj oba kierunki — ustaw flex-direction: row, zapisz w myśli, co robi justify-content, a potem przełącz na column i sprawdź, czy potrafisz przewidzieć wynik. To najszybszy sposób na zrozumienie osi.
- Zacznij od flex-basis, potem dodaj grow — najpierw ustaw rozmiary bazowe i sprawdź, czy elementy mieszczą się w kontenerze, a dopiero potem rozdawaj wolną przestrzeń przez flex-grow.
- Sprawdzaj zachowanie przy ciasnym kontenerze — zwężaj podgląd, aż elementy zaczną się kurczyć lub zawijać; tam ujawniają się różnice między flex-shrink, flex-wrap i min-width.
- Testuj pojedynczy element osobno — użyj align-self albo order na jednym dziecku, żeby zobaczyć, jak nadpisuje ustawienia kontenera, i nie zmieniaj przy tym pozostałych elementów.
Czego piaskownica nie pokaże
- Różnice między przeglądarkami — podgląd korzysta z silnika, w którym otwarto stronę, więc specyficzne zachowania innych przeglądarek i starszych wersji pozostają niewidoczne.
- Domyślny minimalny rozmiar elementu — elementy flex mają niejawnie min-width: auto i nie kurczą się poniżej rozmiaru treści; bez ustawienia min-width: 0 wnioski z testu kurczenia bywają mylące.
- Statyczną i krótką treść — długie teksty, obrazy bez podanych wymiarów, zawijanie i zmiana zawartości w czasie zmieniają układ, którego nie widać na prostym przykładzie.
- Kontekst całej strony — narzędzie nie uwzględnia scrollbarów, zoomu, trybu zapisu od prawej do lewej, dziedziczenia ani reguł z arkuszy, które w projekcie mogą nadpisać ustawienia z piaskownicy.
Najczęstsze pytania
Dlaczego align-items i justify-content są mylące?
Justify-content: oś główna (main axis) – zależy od flex-direction. Przy row: poziomo. Przy column: pionowo. Align-items: oś poprzeczna (cross axis) – zawsze prostopadła do main axis. Mnemotechnika: "justify = main axis", "align = cross axis". Piaskownica pomaga zobaczyć to wizualnie.
Co robi flex: 1?
flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Element rośnie aby wypełnić dostępną przestrzeń. Wszystkie elementy flex:1 mają równe rozmiary. flex: 1 1 auto: bazowy rozmiar to naturalny rozmiar elementu (auto), ale może rosnąć i kurczyć.
Jak naprawić elementy wychodzące poza kontener?
Dodaj flex-wrap: wrap – elementy zawijają się do nowej linii. Dodaj min-width: 0 na elemencie flex (zapobiega przelewaniu długich tekstów). overflow: hidden na elemencie flex. flex-shrink: 1 (domyślnie 1 – element może się kurczyć).
Jak wyśrodkować element absolutnie w kontenerze flex?
display: flex + align-items: center + justify-content: center na rodzicu. Alternatywa bez flex: position: absolute + top:50% + left:50% + transform:translate(-50%,-50%). Nowy sposób (2024): align-content: center na pojedynczym elemencie (CSS Box Alignment Level 3).
Czy Flexbox działa na wszystkich przeglądarkach?
Tak – pełna obsługa: Chrome 29+, Firefox 28+, Safari 9+, IE 11 (z prefiksami, ograniczona). Dla IE 11: unikaj flex-gap (nie obsługiwane), shorthand flex może wymagać -ms-. Caniuse.com: flexbox = 99.5% wsparcie globalnie (2024).
Czym różni się justify-content od align-items?
justify-content działa wzdłuż osi głównej wyznaczonej przez flex-direction, a align-items wzdłuż osi poprzecznej. Przy flex-direction: row oś główna jest pozioma, a po zmianie na column role obu właściwości zamieniają się miejscami.
Dlaczego flex-grow nie rozciąga mojego elementu?
flex-grow dzieli wyłącznie wolną przestrzeń, więc jeśli rozmiary bazowe i odstępy wypełniają kontener, nie ma czego dzielić. Sprawdź też, czy właściwość jest ustawiona na elemencie potomnym, a nie na kontenerze.
Jak wyśrodkować element w pionie i poziomie za pomocą Flexbox?
Ustaw na rodzicu display: flex, justify-content: center oraz align-items: center. Przy domyślnym flex-direction: row pierwsza właściwość odpowiada za poziom, a druga za pion; po przełączeniu na column ich działanie się odwraca.
Po co używać gap zamiast marginesów w Flexbox?
gap tworzy odstępy tylko między elementami i nie dodaje ich na brzegach kontenera, więc nie musisz zerować marginesu ostatniego elementu. Aktualna wartość odstępu jest też widoczna w jednym miejscu, a nie rozproszona po dzieciach.
Dlaczego element nie chce się skurczyć poniżej pewnej szerokości?
Elementy flex mają domyślnie min-width: auto, co blokuje kurczenie poniżej rozmiaru treści, na przykład długiego wyrazu. Ustaw na takim elemencie min-width: 0 albo pozwól zawijać tekst, żeby flex-shrink zadziałał.
Powiązane narzędzia: piaskownica CSS Grid, generator tooltipów CSS i konwerter em/rem na piksele.