CSS Academy · Lekcja

justify-content i align-items

Rozmieścicie Państwo elementy wzdłuż osi głównej i poprzecznej za pomocą justify-content i align-items.

justify-content i align-items to bezpłatna lekcja CSS 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Dwie kluczowe właściwości wyrównywania

Dwie najczęściej używane właściwości wyrównywania flex to:

justify-content — wyrównuje elementy wzdłuż osi głównej
align-items — wyrównuje elementy wzdłuż osi poprzecznej

justify-content: flex-start

flex-start (domyślnie) grupuje elementy przy początku osi głównej. W kierunku row elementy są wyrównywane do lewej.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Wyśrodkowuje elementy wzdłuż osi głównej. To klasyczna technika poziomego centrowania za pomocą Flexboxa.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Grupuje elementy przy końcu osi głównej (po prawej stronie w kierunku row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Rozmieszcza elementy z równymi odstępami między nimi. Pierwszy element znajduje się na początku, a ostatni na końcu — bez odstępów przy krawędziach.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Umieszcza równy odstęp wokół każdego elementu. Elementy przy krawędziach otrzymują połowę odstępu występującego między elementami wewnętrznymi. Wizualnie przy krawędziach jest o połowę mniej dopełnienia niż między elementami.

justify-content: space-evenly

Wszystkie odstępy, w tym te przy krawędziach, są równe. W przeciwieństwie do space-around dopełnienie przy krawędziach jest równe odstępom między elementami.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (domyślnie)

stretch (domyślnie) sprawia, że wszystkie elementy flex w osi poprzecznej wypełniają rozmiar poprzeczny kontenera. Elementy w kontenerze wierszowym uzyskują tę samą wysokość.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Wyśrodkowuje elementy w osi poprzecznej. W kontenerze wierszowym wyśrodkowuje je w pionie. To klasyczne rozwiązanie problemu pionowego centrowania.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start i flex-end

flex-start wyrównuje elementy do krawędzi początku osi poprzecznej (do góry w wierszu). flex-end wyrównuje je do krawędzi końca osi poprzecznej (dołu w wierszu).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Wyrównuje elementy tak, aby ich linie bazowe tekstu znajdowały się na jednej wysokości. Jest to przydatne, gdy elementy mają różne rozmiary czcionki, ale powinny wyglądać na wyrównane.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Szybkie sprawdzenie

Jaka kombinacja idealnie wyśrodkuje element flex zarówno w poziomie, jak i w pionie w jego kontenerze?

Podsumowanie

justify-content rozmieszcza elementy wzdłuż osi głównej za pomocą wartości takich jak flex-start, center i space-between. align-items umieszcza elementy w osi poprzecznej za pomocą wartości stretch, center i flex-start. Razem właściwości te kontrolują wyrównywanie w obu osiach.

Często zadawane pytania

Czy lekcja „justify-content i align-items” jest bezpłatna?

Tak — pełny tekst „justify-content i align-items” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „justify-content i align-items”?

Rozmieścicie Państwo elementy wzdłuż osi głównej i poprzecznej za pomocą justify-content i align-items. Ćwiczysz CSS 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ąć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS 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 „justify-content i align-items”?

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 CSS Academy?

Tak. Każda lekcja CSS 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

← Powrót do CSS Academy