Flexbox: oś główna, oś poprzeczna i kontener

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, czym jest kontener flex i elementy flex,
• włączyć Flexbox przez display: flex,
• odróżnić oś główną od osi poprzecznej,
• zmienić kierunek układu za pomocą flex-direction,
• użyć justify-content, align-items i gap w prostym komponencie UI.

Kontekst praktyczny

Flexbox pojawia się w bardzo wielu małych i średnich częściach interfejsu: nawigacjach, paskach narzędzi, kartach z ikoną i tekstem, grupach przycisków, etykietach, formularzach oraz stopkach komponentów.

Najczęściej używasz go wtedy, gdy kilka elementów ma ułożyć się w jednej linii albo w jednej kolumnie i potrzebujesz wygodnie kontrolować odstęp oraz wyrównanie.

Czym jest Flexbox?

Flexbox to model układu CSS zaprojektowany do rozmieszczania elementów w jednym wymiarze: w poziomie albo w pionie. Jeden wymiar nie oznacza, że layout jest prosty. Oznacza, że w danym momencie najważniejsza jest jedna linia układu.

Element z włączonym Flexboxem staje się kontenerem flex. Jego bezpośrednie dzieci stają się elementami flex i zaczynają układać się według zasad tego kontenera.

display: flex

Najmniejszy możliwy start z Flexboxem to jedna deklaracja na rodzicu. Od tego momentu jego bezpośrednie dzieci układają się domyślnie w rzędzie.

.toolbar {
  display: flex;
}

To nie zmienia znaczenia HTML. Zmienia tylko sposób, w jaki przeglądarka układa dzieci elementu .toolbar.

Oś główna i oś poprzeczna

Flexbox działa wokół dwóch osi. Oś główna to kierunek, w którym układają się elementy. Oś poprzeczna jest do niej prostopadła.

• Przy domyślnym flex-direction: row oś główna biegnie poziomo.
• Oś poprzeczna biegnie wtedy pionowo.
• Gdy ustawisz flex-direction: column, osie zamieniają praktyczne role: główna biegnie pionowo, a poprzeczna poziomo.

flex-direction

flex-direction określa kierunek osi głównej. Najczęściej spotkasz dwie wartości: row i column.

.navigation {
  display: flex;
  flex-direction: row;
}

.stack {
  display: flex;
  flex-direction: column;
}

row dobrze pasuje do menu, pasków akcji i poziomych list. column sprawdza się w pionowych grupach formularza, kartach i panelach bocznych.

justify-content

justify-content wyrównuje elementy wzdłuż osi głównej. Jeśli oś główna jest pozioma, ta właściwość kontroluje poziome rozmieszczenie elementów.

.navigation {
  display: flex;
  justify-content: space-between;
}

Popularne wartości to flex-start, center, flex-end, space-between i space-around. W pasku z logo po lewej i przyciskiem po prawej często użyjesz space-between.

align-items

align-items wyrównuje elementy wzdłuż osi poprzecznej. Przy domyślnym układzie row oznacza to zwykle wyrównanie pionowe.

.navigation {
  display: flex;
  align-items: center;
}

W praktyce align-items: center jest bardzo częste, bo logo, linki i przycisk w pasku nawigacji powinny zwykle siedzieć na wspólnej osi wizualnej.

gap

gap ustawia odstęp między elementami flex. Jest czytelniejszy niż dodawanie marginesów do każdego dziecka i pilnowanie, aby ostatni element nie miał niepotrzebnego odstępu.

.menu {
  display: flex;
  gap: 1rem;
}

To dobry nawyk: jeśli odstęp opisuje relację między elementami w tym samym układzie, najpierw sprawdź gap.

Przykład paska UI

Poniższy przykład buduje prosty pasek z logo, menu i przyciskiem CTA. To dokładnie ten typ komponentu, w którym Flexbox daje szybki, przewidywalny efekt.

Kopiuj<nav class="topbar" aria-label="Przykładowa nawigacja">
  <a class="topbar__logo" href="#">Vault</a>
  <div class="topbar__menu">
    <a href="#">Lekcje</a>
    <a href="#">Ćwiczenia</a>
    <a href="#">Plan</a>
  </div>
  <a class="topbar__cta" href="#">Start</a>
</nav>

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.topbar__menu {
  display: flex;
  gap: 0.75rem;
}

Interpretacja: cały pasek jest kontenerem flex. align-items: center wyrównuje elementy pionowo, justify-content: space-between rozpycha główne grupy na boki, a gap pilnuje bezpiecznych odstępów między elementami.

Najczęstsze błędy początkujących

• Ustawianie justify-content na dziecku zamiast na kontenerze flex.
• Mylenie osi: justify-content działa po osi głównej, a align-items po osi poprzecznej.
• Oczekiwanie, że align-items zawsze oznacza poziome wyrównanie. To zależy od flex-direction.
• Dodawanie marginesów do każdego elementu zamiast użycia gap.
• Włączanie Flexboxa na zbyt głębokim elemencie. Pamiętaj, że Flexbox układa bezpośrednie dzieci kontenera.

Mini zadanie

Zbuduj prosty pasek z trzema częściami: logo, menu i przyciskiem CTA. Użyj semantycznego elementu nav oraz kilku linków.

• Na kontenerze ustaw display: flex.
• Wyrównaj elementy pionowo przez align-items: center.
• Rozmieść główne części paska przez justify-content: space-between.
• Dodaj gap, aby elementy nie przyklejały się do siebie na mniejszym ekranie.
• W osobnym kontenerze menu również użyj Flexboxa, aby linki miały równy odstęp.

Na koniec zmień flex-direction z row na column i sprawdź, jak zmienia się znaczenie osi głównej oraz poprzecznej.

Checklista

• Potrafię wskazać kontener flex i jego bezpośrednie dzieci.
• Wiem, że display: flex ustawiam na rodzicu.
• Rozumiem, że oś główna zależy od flex-direction.
• Umiem dobrać justify-content do rozmieszczenia elementów po osi głównej.
• Umiem użyć align-items do wyrównania po osi poprzecznej.
• Wiem, kiedy gap jest lepszy niż marginesy między dziećmi kontenera.

Podsumowanie lekcji

Wiesz już, że Flexbox zaczyna się od kontenera i jego bezpośrednich dzieci. Rozumiesz oś główną, oś poprzeczną oraz wpływ flex-direction na działanie justify-content i align-items.

To fundament pod kolejną lekcję, w której Flexbox przejdzie z pojedynczego paska do praktycznych układów: nawigacji, kart i sekcji.