Flexbox do tworzenia układów
Używaj Flexbox do wyrównywania elementów w wierszu lub kolumnie, rozdzielania wolnego miejsca i zawijania treści bez sztuczek z float.
Flexbox do tworzenia układów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest Flexbox?
Flexbox (Flexible Box Layout) to model układu CSS przeznaczony do układów jednowymiarowych — rozdziela przestrzeń wzdłuż pojedynczego wiersza lub kolumny. Rozwiązuje problemy, z którymi układy oparte na floatach nie radziły sobie w elegancki sposób.
Włączanie Flexboxa
Należy zastosować display: flex do kontenera. Jego bezpośrednie elementy potomne automatycznie stają się elementami flex. Elementy potomne tych elementów nie są objęte tym działaniem.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Ustawia oś główną. row (domyślnie): elementy są ułożone od lewej do prawej. row-reverse: od prawej do lewej. column: od góry do dołu. column-reverse: od dołu do góry.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — wyrównywanie wzdłuż osi głównej
Rozdziela przestrzeń wzdłuż osi głównej. flex-start (domyślnie), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — wyrównywanie wzdłuż osi poprzecznej
Wyrównuje elementy wzdłuż osi poprzecznej (prostopadłej do osi głównej). stretch (domyślnie), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}Właściwość gap
gap: row-gap column-gap dodaje przestrzeń między elementami flex bez używania margin. Jest znacznie czytelniejsze niż stosowanie obejścia z margin. Współczesne przeglądarki obsługują tę właściwość w szerokim zakresie.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Domyślnie elementy flex próbują zmieścić się w jednym wierszu. flex-wrap: wrap pozwala im przechodzić do kolejnych wierszy, gdy brakuje miejsca. W połączeniu z gap umożliwia utworzenie prostej responsywnej siatki.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}Skrót flex dla elementów
flex: grow shrink basis stosuje się do elementów flex. flex: 1 to skrócony zapis 1 1 0% — elementy rosną w równym stopniu i ignorują rozmiar swojej zawartości. flex: 0 0 200px tworzy element o stałej szerokości 200px.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self zastosowane do elementu flex nadpisuje wartość align-items kontenera tylko dla tego jednego elementu. Jest przydatne, gdy jeden element ma być wyrównany inaczej niż jego elementy sąsiednie.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }Właściwość order
order steruje wizualną kolejnością elementów flex bez zmieniania kolejności w kodzie HTML. Wartość domyślna to 0. Elementy z mniejszymi wartościami pojawiają się wcześniej. Należy używać tej właściwości oszczędnie — powoduje rozbieżność między kolejnością wizualną a kolejnością w DOM-ie i kolejnością odczytywania.
Centrowanie za pomocą Flexboxa
Najprostszy sposób na wyśrodkowanie elementu zarówno w poziomie, jak i w pionie: należy ustawić rodzicowi display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Szybkie sprawdzenie
Jaka właściwość Flexboxa rozdziela przestrzeń między elementami wzdłuż osi głównej?
Podsumowanie: podstawy Flexboxa
display: flex na kontenerze. flex-direction: row lub column określa oś. justify-content odpowiada za odstępy wzdłuż osi głównej. align-items odpowiada za oś poprzeczną. gap określa odstępy między elementami. flex-wrap umożliwia układ wielowierszowy. Skrót flex na elementach określa ich rozrost. Jest to wszechstronny jednowymiarowy system układu.
Często zadawane pytania
Czy lekcja „Flexbox do tworzenia układów” jest bezpłatna?
Tak — pełny tekst „Flexbox do tworzenia układów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Flexbox do tworzenia układów”?
Używaj Flexbox do wyrównywania elementów w wierszu lub kolumnie, rozdzielania wolnego miejsca i zawijania treści bez sztuczek z float. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Flexbox do tworzenia układów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Znacznik meta viewport
- Flexbox do tworzenia układów
- CSS Grid do tworzenia układów
- Zapytania medialne i projektowanie mobile-first