Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność
Opanuj właściwości justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis i order.
Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 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.
Powtórzenie: kontener i elementy Flex
Podsumowanie: display: flex na kontenerze tworzy elementy flex z jego bezpośrednich dzieci. Oś główna biegnie wzdłuż flex-direction. Oś poprzeczna jest do niej prostopadła.
Szczegółowe omówienie wartości justify-content
Wszystkie wartości justify-content dla kontenera o kierunku wiersza: flex-start (domyślna), flex-end, center, space-between (odstępy tylko między elementami), space-around (równe marginesy wokół każdego elementu), space-evenly (równe odstępy w każdym miejscu).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items a align-content
align-items wyrównuje elementy w pojedynczym wierszu. align-content wyrównuje wiele wierszy (działa tylko wtedy, gdy flex-wrap ma wartość wrap i istnieje wiele wierszy).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self dla pojedynczych elementów
align-self zastępuje align-items dla konkretnego elementu flex. Jest przydatne, gdy jeden element ma się rozciągać, a pozostałe mają być wyśrodkowane.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap i wrap-reverse
flex-wrap: wrap pozwala elementom przechodzić do nowych wierszy. wrap-reverse zawija je, ale w przeciwnym kierunku. Połącz tę właściwość z gap, aby łatwo tworzyć responsywne siatki.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
Te trzy właściwości tworzą skrót flex używany dla elementów. flex-grow: udział w dostępnej przestrzeni. flex-shrink: tempo zmniejszania, gdy brakuje miejsca. flex-basis: początkowy rozmiar przed zwiększaniem lub zmniejszaniem.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Popularne skróty flex
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (zajmuje dwa razy więcej miejsca niż flex: 1).
Właściwość order
order zmienia wizualną kolejność elementów flex bez modyfikowania kodu HTML. Wartość domyślna to 0. Wartości ujemne pojawiają się przed 0. Używaj tej właściwości ostrożnie — rozbieżność między kolejnością wizualną a kolejnością w DOM może dezorientować użytkowników klawiatury i czytników ekranu.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 jako rozwiązanie problemu przepełnienia
Elementy flex mają niejawną wartość min-width: auto, co oznacza, że nie zmniejszą się poniżej rozmiaru swojej zawartości. Ustaw min-width: 0, aby umożliwić im dalsze zmniejszanie — jest to niezbędne do obcinania tekstu wewnątrz elementów flex.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Odstępy flex bez gap
W starszych środowiskach, które nie obsługują gap, użyj marginesu na elementach i ujemnego marginesu na kontenerze, aby utworzyć odstępy. Obecnie jednak gap jest obsługiwane we wszystkich nowoczesnych przeglądarkach — preferuj tę właściwość.
Zagnieżdżone kontenery flex
Dowolny element flex może sam być kontenerem flex. Zagnieżdżaj Flexbox, aby tworzyć złożone układy: na przykład wiersz kart, których wewnętrzna zawartość również jest ułożona za pomocą flex. To standardowy wzorzec we współczesnych układach.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Szybki test
Która właściwość rozdziela przestrzeń między elementami flex wzdłuż osi poprzecznej, gdy flex-wrap ma wartość wrap?
Podsumowanie: zaawansowany Flexbox
justify-content służy do rozmieszczania elementów wzdłuż osi głównej. align-items — do wyrównywania elementów w pojedynczym wierszu wzdłuż osi poprzecznej. align-content — do wyrównywania wielu wierszy wzdłuż osi poprzecznej. align-self — do wyrównywania pojedynczego elementu. flex-wrap: wrap umożliwia tworzenie wielu wierszy. Skrót flex kontroluje zwiększanie, zmniejszanie i rozmiar bazowy. order zmienia kolejność wizualną. min-width: 0 zapobiega błędom związanym ze zmniejszaniem.
Często zadawane pytania
Czy lekcja „Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność” jest bezpłatna?
Tak — pełny tekst „Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność” 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 — dogłębne omówienie: wyrównywanie, zawijanie i kolejność”?
Opanuj właściwości justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis i order. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność”?
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
- Flexbox — dogłębne omówienie: wyrównywanie, zawijanie i kolejność
- CSS Grid: template-areas, auto-fit, minmax
- Łączenie Flexbox i Grid
- Zmienne CSS na potrzeby motywów