Justowanie zawartości i wyrównywanie elementów
Pozycjonować elementy potomne wzdłuż osi głównej za pomocą justify-* oraz osi poprzecznej za pomocą items-*, aby uzyskiwać typowe układy.
Justowanie zawartości i wyrównywanie elementów to bezpłatna lekcja Tailwind 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 Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Dwie osie wyrównywania we Flexboxie
Wyrównywanie we Flexboxie odbywa się wzdłuż dwóch prostopadłych osi. Oś główna przebiega w kierunku flex-row (poziomo) lub flex-col (pionowo). Oś poprzeczna jest prostopadła do osi głównej. justify-* steruje wyrównaniem wzdłuż osi głównej. items-* steruje wyrównaniem wzdłuż osi poprzecznej. Zrozumienie tej różnicy jest kluczem do opanowania układów flex.
justify-content: pozycjonowanie na osi głównej
Narzędzia justify-* odpowiadają właściwości CSS justify-content. W wierszu flex sterują poziomym położeniem grupy elementów. justify-start umieszcza elementy przy lewej krawędzi (domyślnie). justify-end umieszcza je przy prawej krawędzi. justify-center wyśrodkowuje grupę. justify-between rozdziela elementy, pozostawiając między nimi jednakowe odstępy. justify-around dodaje jednakowe odstępy wokół każdego elementu. justify-evenly rozdziela przestrzeń równomiernie, także przy krawędziach.
<div class="flex justify-start gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-center gap-2 bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-between bg-gray-100 p-4 mb-2"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>
<div class="flex justify-end gap-2 bg-gray-100 p-4"><div class="bg-blue-400 p-3">A</div><div class="bg-blue-400 p-3">B</div></div>justify-between: rozdzielanie przestrzeni
justify-between to jedno z najczęściej używanych narzędzi flex. Umieszcza pierwszy element na początku kontenera, ostatni na jego końcu, a pozostałe rozdziela, pozostawiając między nimi jednakowe odstępy. To standardowy wzorzec dla navbarów (logo po lewej, odnośniki po prawej), kart (ikona po lewej, akcja po prawej) oraz dowolnych komponentów, których elementy powinny zajmować całą szerokość z zachowaniem odstępów.
<!-- Navbar with justify-between -->
<div class="flex items-center justify-between px-6 py-4 bg-white shadow">
<span class="font-bold text-indigo-600">Logo</span>
<button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded">Sign Up</button>
</div>
<!-- Card footer with actions -->
<div class="flex items-center justify-between pt-4 border-t">
<span class="text-sm text-gray-500">Last updated: Today</span>
<button class="text-indigo-600 text-sm font-medium">Edit</button>
</div>align-items: pozycjonowanie na osi poprzecznej
Narzędzia items-* odpowiadają właściwości CSS align-items i sterują położeniem elementów na osi poprzecznej. W wierszu flex oznacza to wyrównanie w pionie. items-start wyrównuje elementy do góry. items-end wyrównuje je do dołu. items-center wyśrodkowuje wszystkie elementy w pionie. items-stretch (domyślnie) rozciąga elementy, aby wypełniły wysokość kontenera. items-baseline wyrównuje linie bazowe tekstu.
<!-- All four items-* values demonstrated in a row -->
<div class="flex items-start h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-blue-400 p-2 text-sm">Start</div>
</div>
<div class="flex items-center h-24 gap-4 bg-gray-100 p-4 mb-2">
<div class="bg-green-400 p-2 text-sm">Center</div>
</div>
<div class="flex items-end h-24 gap-4 bg-gray-100 p-4">
<div class="bg-red-400 p-2 text-sm">End</div>
</div>items-center: najczęściej używane wyrównanie
items-center jest używane niemal w każdym wierszu flex, ponieważ wyśrodkowuje w pionie wszystkie elementy potomne niezależnie od ich indywidualnych wysokości. Ikony, tekst i przyciski — nawet gdy różnią się rozmiarem — są wyrównane względem swoich środków w pionie. Dzięki temu navbary, elementy list i stopki kart wyglądają dopracowanie bez ręcznego ustawiania wysokości.
<!-- Icon + text + badge: all different heights, all centered -->
<div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-50">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 font-bold">
JD
</div>
<div>
<p class="font-medium text-gray-900">Jane Doe</p>
<p class="text-xs text-gray-500">Product Designer</p>
</div>
<span class="ml-auto bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full">
Active
</span>
</div>items-baseline do wyrównywania tekstu
items-baseline wyrównuje elementy tak, aby ich linie bazowe tekstu (dolne krawędzie wielkich liter) znajdowały się na jednej wysokości. Jest to przydatne podczas łączenia różnych rozmiarów czcionki w jednym wierszu — na przykład dużej ceny z mniejszym symbolem waluty lub etykietą jednostki. Bez wyrównania do linii bazowej różne rozmiary wyglądają niezgrabnie; z nim tworzą wizualnie spójną grupę.
<!-- Price with currency and period aligned on baseline -->
<div class="flex items-baseline gap-1">
<span class="text-sm font-medium text-gray-500">$</span>
<span class="text-4xl font-extrabold text-gray-900">49</span>
<span class="text-sm font-medium text-gray-500">/month</span>
</div>Łączenie justify i items
Największe możliwości daje połączenie justify-* i items-*. Klasyczny zestaw flex items-center justify-center jednocześnie wyśrodkowuje zawartość na obu osiach. flex items-center justify-between rozdziela elementy poziomo, zachowując ich pionowe wyśrodkowanie — to standardowy wzorzec navbara. Można o nim myśleć jak o jednoczesnym sterowaniu dwiema niezależnymi osiami.
<!-- Perfect vertical and horizontal centering -->
<div class="min-h-screen flex items-center justify-center">
<p class="text-2xl font-bold">Dead center</p>
</div>
<!-- Navbar pattern -->
<nav class="flex items-center justify-between px-8 h-16 bg-white border-b">
<span class="font-bold">Brand</span>
<button class="text-sm font-medium text-indigo-600">Login</button>
</nav>align-self: nadpisywanie wyrównania pojedynczego elementu
Podczas gdy items-* wyrównuje wszystkie elementy potomne w ten sam sposób, narzędzia self-* nadpisują wyrównanie pojedynczego elementu flex. self-start, self-end, self-center, self-stretch i self-baseline działają dokładnie tak jak ich odpowiedniki items-*, ale dotyczą elementu, na którym zostały zapisane, a nie wszystkich elementów potomnych. Można ich użyć, aby wyłączyć jeden element ze wspólnego wyrównania.
<!-- Most items centered, but one aligned to the top -->
<div class="flex items-center gap-4 bg-gray-100 p-4 h-24">
<div class="self-start bg-indigo-400 p-3">Top</div>
<div class="bg-green-400 p-3">Middle</div>
<div class="bg-blue-400 p-3">Middle</div>
</div>justify-items w Gridzie (nie we Flexboxie)
Nie należy mylić justify-content (dla kontenerów flex) z justify-items (dla kontenerów grid). W Tailwind justify-* steruje właściwością justify-content kontenerów flex. W CSS Grid używa się justify-items-* i place-items-*. Sterują one położeniem elementów potomnych gridu wewnątrz poszczególnych komórek, a nie sposobem rozdzielania ścieżek siatki.
<!-- Flex: justify-between distributes the group -->
<div class="flex justify-between">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Grid: justify-items centers each item within its cell -->
<div class="grid grid-cols-3 justify-items-center">
<div>A</div><div>B</div><div>C</div>
</div>align-content dla wielowierszowego flex
Gdy elementy flex są zawijane do wielu wierszy (za pomocą flex-wrap), narzędzia content-* sterują wyrównaniem całej grupy wierszy. content-center wyśrodkowuje wszystkie wiersze jako grupę w kontenerze. content-between rozdziela wiersze, pozostawiając między nimi odstępy. Dotyczy to zbioru wierszy (lub kolumn), a nie pojedynczych elementów.
<!-- Multi-line flex with content alignment -->
<div class="flex flex-wrap content-center gap-4 bg-gray-100 h-64 p-4">
<div class="bg-blue-400 p-4 rounded">A</div>
<div class="bg-blue-400 p-4 rounded">B</div>
<div class="bg-blue-400 p-4 rounded">C</div>
<div class="bg-blue-400 p-4 rounded">D</div>
<div class="bg-blue-400 p-4 rounded">E</div>
</div>Praktyka: wiersz kart z funkcjami
Wiersz kart z funkcjami często korzysta z flex items-start (aby karty o różnej wysokości były wyrównane od góry) w połączeniu z gap-6. Każda karta wewnętrznie używa flex flex-col, dzięki czemu odnośnik „Dowiedz się więcej” można przesunąć na dół za pomocą mt-auto. To połączenie tworzy profesjonalną siatkę kart, w której wszystkie karty zaczynają się na tej samej wysokości.
<div class="flex items-start gap-6">
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-indigo-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm flex-1">Lightning-fast builds with the JIT engine.</p>
<a href="#" class="mt-4 text-indigo-600 text-sm font-medium">Learn more →</a>
</div>
<div class="flex flex-col flex-1 bg-white rounded-xl p-6 shadow">
<div class="w-10 h-10 bg-green-100 rounded-lg mb-4"></div>
<h3 class="font-bold text-gray-900 mb-2">Flexible</h3>
<p class="text-gray-500 text-sm flex-1">Customize every aspect with the config.</p>
<a href="#" class="mt-4 text-green-600 text-sm font-medium">Learn more →</a>
</div>
</div>Szybki sprawdzian
Sprawdź swoją wiedzę na temat zagadnień z Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji nauczyli się Państwo, że: justify-* steruje wyrównaniem wzdłuż osi głównej (poziomo w flex-row), items-* steruje wyrównaniem wzdłuż osi poprzecznej (pionowo w flex-row), a połączenie flex items-center justify-between to standardowy wzorzec paska nawigacyjnego. Następnie zajmiemy się kontrolowaniem sposobu, w jaki elementy potomne flex rosną i kurczą się, za pomocą narzędzi flex-grow, flex-shrink i basis.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Justowanie zawartości i wyrównywanie elementów” jest bezpłatna?
Tak — pełny tekst „Justowanie zawartości i wyrównywanie elementó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 Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Justowanie zawartości i wyrównywanie elementów”?
Pozycjonować elementy potomne wzdłuż osi głównej za pomocą justify-* oraz osi poprzecznej za pomocą items-*, aby uzyskiwać typowe układy. Ćwiczysz Tailwind 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ąć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind 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 „Justowanie zawartości i wyrównywanie elementó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 Tailwind CSS Academy?
Tak. Każda lekcja Tailwind 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
- Włączanie flex i określanie kierunku
- Justowanie zawartości i wyrównywanie elementów
- Rozrastanie, kurczenie i baza flex
- Zawijanie i odstępy