Flexbox w CSS to nowoczesny model układu, który pozwala w prosty sposób tworzyć elastyczne, responsywne i przewidywalne rozmieszczenia elementów w jednym kierunku – w wierszu lub kolumnie.
Dzięki niemu można łatwo wyrównywać i rozmieszczać elementy, bez uciekania się do floatów, hacków z display: table czy skomplikowanych układów, co ma duże znaczenie także dla dostępności stron.
Czym jest Flexbox i dlaczego powstał?
CSS Flexible Box Layout (Flexbox) to moduł CSS zaprojektowany do definiowania układu elementów HTML wewnątrz kontenera, również wtedy, gdy ich rozmiary są dynamiczne lub nieznane z góry. Flexbox rozwiązuje typowe problemy układu i upraszcza CSS w realnych projektach.
Najczęściej rozwiązywane wyzwania to:
- równomierne rozkładanie przestrzeni między elementami,
- wyrównywanie w pionie i poziomie,
- obsługa zmieniającej się liczby elementów (np. kafelki, karty produktów),
- naturalna responsywność bez pisania dużej liczby media queries.
W przeciwieństwie do CSS Grid, Flexbox jest modelem jednowymiarowym – operuje na jednym kierunku (wiersz lub kolumna), a nie na pełnej siatce w dwóch wymiarach.
Podstawowe pojęcia – kontener i elementy flex
Kontener flex (flex container) to element-rodzic, na którym włączamy Flexbox.
Elementy flex (flex items) to bezpośrednie dzieci kontenera, które podlegają regułom Flexboxa.
Aby zamienić dowolny element w kontener flex, wystarczy nadać mu deklarację:
.container {
display: flex; /* kontener blokowy */
/* lub */
display: inline-flex; /* kontener w linii */
}
Deklaracja display: flex lub display: inline-flex sprawia, że dzieci tego elementu są układane elastycznie zgodnie z modelem Flexbox.
Oś główna i oś poprzeczna
Oś główna (main axis) – wzdłuż niej układane są elementy (domyślnie poziomo, w wierszu).
Oś poprzeczna (cross axis) – prostopadła do osi głównej (domyślnie pionowa).
To, która oś jest główna, zależy od właściwości flex-direction:
row– oś główna to pozioma linia z lewej do prawej,row-reverse– pozioma, ale od prawej do lewej,column– pionowa z góry na dół,column-reverse– pionowa z dołu do góry.
Na osi głównej ustawiamy rozkład przestrzeni (justify-content), a na osi poprzecznej – wyrównanie (align-items, align-content).
Właściwości kontenera flex – jak sterować układem
flex-direction – kierunek układu
Przykład użycia:
.container {
display: flex;
flex-direction: row; /* domyślnie: wiersz */
}
Opcje:
row– elementy w jednym wierszu, od lewej do prawej,row-reverse– od prawej do lewej,column– w kolumnie, od góry do dołu,column-reverse– od dołu do góry.
Ta właściwość decyduje, jak interpretowana będzie oś główna (a więc i działanie innych właściwości).
flex-wrap – zawijanie elementów
Domyślnie elementy flex próbują zmieścić się w jednym wierszu lub kolumnie, co może powodować zbyt duże ściskanie. Aby zezwolić im na zawijanie, zastosuj:
Przykład użycia:
.container {
display: flex;
flex-wrap: wrap; /* zamiast domyślnego: nowrap */
}
Opcje:
nowrap– brak zawijania,wrap– zawijanie w dół lub w prawo,wrap-reverse– zawijanie w górę lub w lewo.
Z punktu widzenia dostępności użycie flex-wrap często zmniejsza potrzebę poziomego przewijania na małych ekranach, co poprawia komfort użytkowników korzystających z klawiatury i czytników ekranu.
flex-flow – skrót dla flex-direction + flex-wrap
To zapis skrócony dwóch właściwości, przydatny w większych projektach:
.container {
display: flex;
flex-flow: row wrap; /* kierunek + zawijanie */
}
justify-content – rozkład na osi głównej
Ta właściwość kontroluje, jak elementy dzielą przestrzeń na osi głównej.
Przykład użycia:
.container {
display: flex;
justify-content: flex-start; /* domyślnie */
/* inne możliwości: flex-end, center, space-between, space-around, space-evenly */
}
Najczęściej używane wartości:
flex-start– elementy „przyklejone” do początku osi,flex-end– do końca osi,center– wyrównanie do środka,space-between– pierwszy i ostatni przy krawędziach, reszta z równymi odstępami,space-around– równe odstępy wokół elementów,space-evenly– równe odstępy pomiędzy elementami i krawędziami kontenera.
Przykład zastosowania: poziome menu, które rozciąga się na całą szerokość i równomiernie rozmieszcza linki.
align-items – wyrównanie na osi poprzecznej
Kontroluje wyrównanie pojedynczego wiersza elementów względem osi poprzecznej.
Przykład użycia:
.container {
display: flex;
align-items: stretch; /* domyślnie */
/* inne: flex-start, flex-end, center, baseline */
}
Dostępne wartości:
stretch– elementy rozciągają się, by wypełnić przestrzeń,flex-start– wyrównanie do początku osi poprzecznej,flex-end– do końca,center– do środka,baseline– wyrównanie względem linii bazowej tekstu.
Dzięki align-items bardzo łatwo centrować elementy w pionie – coś, co w „starym” CSS było problematyczne.
align-content – wyrównanie wielu linii
Działa podobnie do justify-content, ale na poziomie całych wierszy/kolumn, gdy Flexbox zawija elementy (flex-wrap: wrap).
Przykład użycia:
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
Wartości są zbliżone do justify-content (flex-start, flex-end, center, space-between, space-around, stretch).
Właściwości elementów flex
flex-grow, flex-shrink, flex-basis i skrót flex
Te właściwości kontrolują, jak poszczególne elementy reagują na brak lub nadmiar przestrzeni w kontenerze.
flex-grow– współczynnik wzrostu (jak bardzo element może się rozszerzyć),flex-shrink– współczynnik kurczenia się (jak bardzo może się zmniejszyć),flex-basis– wartość bazowa rozmiaru (np. bazowa szerokość w wierszu).
Przykład:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}
Często używa się zapisu skróconego:
.item {
flex: 1; /* w przybliżeniu: 1 1 0 */
}
.item-fixed {
flex: 0 0 150px; /* nie rośnie, nie kurczy się, stałe 150px */
}
Jeśli wszystkie elementy mają flex: 1, dostępna przestrzeń w wierszu zostanie między nimi podzielona po równo. Można też np. ustawić:
.item:nth-child(1) { flex: 2; } /* dwa razy więcej miejsca niż inne */
.item:nth-child(2) { flex: 1; }
.item:nth-child(3) { flex: 1; }
W ten sposób tworzysz elastyczne kolumny bez liczenia procentów.
align-self – indywidualne wyrównanie
Pozwala nadpisać align-items dla pojedynczego elementu:
.item.special {
align-self: center; /* tylko ten element będzie wycentrowany */
}
order – zmiana kolejności (i uwaga o dostępności!)
Każdy element flex ma domyślnie order: 0. Możemy zmienić ich kolejność, nie ruszając HTML:
.item:first-child { order: 2; }
.item:last-child { order: 1; }
W ten sposób zmieniamy kolejność wizualną w obrębie kontenera.
Czytniki ekranu i nawigacja klawiaturą opierają się na kolejności w DOM, a nie na order.
Jeśli wizualna kolejność różni się od struktury dokumentu, użytkownik korzystający z klawiatury może „skakać” po elementach w pozornie chaotyczny sposób.
Dlatego order warto stosować oszczędnie i tylko tam, gdzie nie zaburza logicznej kolejności treści.
Przykładowy układ – responsywne kafelki
Poniżej prosty przykład układu kart, który:
- układa elementy w jednym wierszu,
- zawija je, gdy brakuje miejsca,
- równomiernie dzieli przestrzeń,
- działa bez dodatkowych media queries.
Przykładowy HTML:
<section class="cards">
<article class="card">Karta 1</article>
<article class="card">Karta 2</article>
<article class="card">Karta 3</article>
<article class="card">Karta 4</article>
</section>
Przykładowy CSS:
.cards {
display: flex;
flex-wrap: wrap; /* pozwalamy się zawijać */
gap: 1rem; /* odstęp między kartami (zamiast marginów) */
justify-content: center; /* karty wyśrodkowane */
}
.card {
flex: 1 1 220px; /* rośnie, kurczy się, bazowo 220px */
padding: 1rem;
border: 1px solid #ccc;
}
Tak skonstruowany układ:
- na szerokich ekranach może mieć 3–4 kolumny,
- na mniejszych automatycznie redukuje się do 2 lub 1 kolumny,
- zachowuje przewidywalne odstępy i proporcje.
Flexbox a dostępność (a11y)
Flexbox sam w sobie nie poprawia ani nie pogarsza dostępności, ale sposób jego użycia ma duże znaczenie.
Kolejność DOM vs. kolejność wizualna
Jak wspomniano przy order, kolejność w DOM decyduje o kolejności odczytu przez czytniki ekranu oraz o kolejnych elementach, na które trafia fokus klawiatury (np. klawisz Tab). Z tego wynika kilka praktyk:
- utrzymuj logiczny porządek treści w HTML – Flexboxem jedynie go „układasz”, a nie naprawiasz,
- unikaj dużych rozbieżności między DOM a kolejnością wizualną,
- nie używaj
row-reverse/column-reversedo odwracania semantycznej kolejności ważnych treści.
Responsywny układ a czytelność
Flexbox ułatwia:
- rezygnację z poziomego przewijania na małych ekranach (dzięki
flex-wrap), - utrzymanie sensownej szerokości akapitów (kolumny kurczą się zamiast „ściskać” tekst),
- rozdzielenie sekcji wizualnie (np.
gap, równe odstępy).
To przekłada się na:
- łatwiejsze czytanie (szczególnie dla osób z dysleksją lub słabszym wzrokiem),
- wygodniejsze korzystanie na powiększeniu 200–400%,
- lepsze zachowanie układu przy ustawieniach wysokiego kontrastu czy własnych stylach użytkownika.
Hitboxy, odstępy i klikalne obszary
Dzięki Flexboxowi łatwo powiększyć „obszar klikalny” elementów interaktywnych:
- nawigacji,
- kart produktów,
- przycisków w paskach narzędzi.
Używając flex-grow i gap zamiast ciasno ustawionych inline-block, można zapewnić większe, łatwiej trafialne hitboxy oraz uniknąć zlewania się elementów interaktywnych.
Flexbox czy Grid? Krótkie porównanie
Flexbox i CSS Grid często się uzupełniają. W dużym uproszczeniu:
| Cecha | Flexbox | CSS Grid |
|---|---|---|
| Wymiar układu | jednowymiarowy (wiersz lub kolumna) | dwuwymiarowy (wiersze i kolumny) |
| Typowe zastosowania | nawigacje, paski narzędzi, listy, pojedyncze rzędowe lub kolumnowe układy. | pełne siatki, layout całej strony, złożone kompozycje. |
| Dostosowanie do treści | idealny dla elementów o dynamicznej liczbie i rozmiarach. | idealny dla szablonów z jasno określoną siatką. |
| Kontrola wyrównania | wygodna na osi głównej i poprzecznej. | rozbudowana, z obszarami siatki. |
W praktyce strukturę całej strony często wygodniej zbudować na CSS Grid, a elementy wewnątrz (menu, boks z ikonami, listy kart) – na Flexboxie.
Dobre praktyki użycia Flexboxa
Stosuj poniższe rekomendacje, aby utrzymać przejrzysty, dostępny i skalowalny kod:
- Zachowaj prostotę HTML – nie buduj niepotrzebnie zagnieżdżonych kontenerów flex; każdy nowy „poziom” układu to dodatkowa oś do ogarnięcia;
- Stosuj
gapzamiast marginesów – gdy elementy są wyłącznie w układzie flex, co poprawia spójność odstępów i upraszcza CSS; - Unikaj nadużywania
order– szczególnie przy ważnych elementach nawigacyjnych i głównych treściach; - Testuj keyboard navigation – po wdrożeniu układu przejdź stronę klawiszem Tab, sprawdź kolejność fokusu i widoczność aktywnych elementów;
- Testuj na różnych szerokościach ekranu – korzystaj z narzędzi deweloperskich przeglądarki, zmieniając rozmiar okna i symulując urządzenia mobilne.
Nowoczesne przeglądarki oferują wizualne podglądy Flexboxa w devtools – widać, jak rozkłada się przestrzeń, jak wyglądają osie i które elementy się rozciągają, co ułatwia debugowanie.
Gdzie się nauczyć Flexboxa (po polsku i nie tylko)
Polskie kursy i poradniki online
W języku polskim dostępnych jest wiele darmowych i płatnych źródeł:
- Darmowy kurs HTML/CSS – Flexbox (Itek.pl) – lekcja poświęcona Flexboxowi w ramach większego kursu HTML i CSS, z przykładami i omówieniem właściwości;
- „Flexbox CSS – prosty poradnik dla początkujących” (Codenga) – wprowadzenie do Flexboxa z przykładami układów, wyjaśniające podstawowe właściwości i zastosowania;
- „CSS Flexbox – responsywny layout” (Kurs HTML CSS) – część polskiego kursu frontendu, skupiająca się na tworzeniu responsywnych układów za pomocą Flexboxa;
- „Jak używać Flexbox w CSS (przykłady)” (Bulldogjob) – praktyczne przykłady zastosowania Flexboxa, pokazujące dystrybucję przestrzeni i zasady jednowymiarowego układu;
- „CSS Flexbox: Tworzenie elastycznych układów” (Devstock Academy) – omówienie idei Flexboxa i sposobu wyrównywania elementów bez floatów;
- „CSS3 Flexbox – podstawowe założenia” (Webroad) – przedstawienie koncepcji kontenera flex oraz elastycznego traktowania szerokości i wysokości elementów wewnątrz;
- „CSS: Flexible Box Layout” (CKZiU Mrągowo) – edukacyjny materiał opisujący Flexbox jako rewolucję w projektowaniu responsywnych layoutów;
- Wprowadzenia i przegląd (Shebang, PremiumDigital, NoFluffJobs) – artykuły wyjaśniające, czym jest Flexbox, jak go aktywować (
display: flex/inline-flex) i w jakich sytuacjach rozwiązuje typowe problemy układu.
Te materiały dobrze sprawdzają się jako pierwszy krok – tłumaczą koncepcje po polsku i często zawierają gotowe fragmenty kodu do szybkich testów.
Dokumentacja i źródła referencyjne (angielskojęzyczne)
Po opanowaniu podstaw warto sięgnąć po dokumentację i bardziej szczegółowe opracowania:
- MDN Web Docs (Mozilla) – szczegółowa dokumentacja każdej właściwości Flexboxa, z przykładami i informacją o wsparciu w przeglądarkach;
- „A Complete Guide to Flexbox” (CSS-Tricks) – popularny przewodnik z ilustracjami i przykładami dla wszystkich właściwości;
- Specyfikacja W3C – dla osób, które chcą zrozumieć mechanikę na poziomie standardu.
Interaktywne gry i ćwiczenia
Aby utrwalić Flexboxa w praktyce, sięgnij po interaktywne gry: np. zadania z ustawianiem justify-content, align-items czy flex-direction oraz ćwiczenia polegające na odtworzeniu konkretnego układu.
Dzięki temu po kilku godzinach nabierzesz intuicji – zamiast zastanawiać się nad tym, co robi space-between, zaczniesz automatycznie wybierać odpowiednie wartości.
Jak efektywnie uczyć się Flexboxa
Proponowany plan nauki:
-
Teoria w pigułce: przejrzyj jedno–dwa polskie wprowadzenia (np. Itek.pl + Codenga), żeby zrozumieć: kontener vs elementy, osie, najważniejsze właściwości (
flex-direction,justify-content,align-items,flex,flex-wrap). -
Małe ćwiczenia: wykonaj krótkie zadania, które szybko utrwalają podstawy.
- zrób układ menu nawigacyjnego,
- stwórz rząd kart/kafelków produktu,
- wycentruj element w pionie i poziomie za pomocą Flexboxa.
-
Refaktoryzacja istniejącej strony: przepisz fragment projektu opartego na floatach lub
inline-blockna Flexbox i porównaj złożoność kodu. -
Testowanie pod kątem dostępności: sprawdź użyteczność i kolejność fokusów.
- sprawdź kolejność fokusu klawiatury,
- użyj czytnika ekranu (np. NVDA lub VoiceOver) i upewnij się, że kolejność treści jest logiczna,
- przetestuj układ na powiększeniu 200–400%.
-
Pogłębienie wiedzy i kombinacja z Gridem: gdy poczujesz się pewnie z Flexboxem, łącz go z CSS Grid – Flexbox świetnie sprawdza się wewnątrz obszarów siatki.
