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";
}
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.
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.
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).
Powiązane narzędzia: piaskownica CSS Grid, generator tooltipów CSS i konwerter em/rem na piksele.