CSS Academy · Lekcja

Nadpisywanie wyrównania elementu flex za pomocą align-self

Nauczy się Pan/Pani nadpisywać align-items kontenera dla pojedynczych elementów flex za pomocą align-self.

Nadpisywanie wyrównania elementu flex za pomocą align-self to bezpłatna lekcja CSS 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest align-self?

align-self zastępuje ustawienie align-items kontenera flex dla konkretnego elementu flex. Dotyczy pojedynczych elementów, a nie kontenera.

Wartości align-self

Akceptuje te same wartości co align-items:

auto — dziedziczy align-items kontenera (domyślnie)
flex-start — wyrównuje do początku osi poprzecznej
flex-end — wyrównuje do końca osi poprzecznej
center — wyśrodkowuje na osi poprzecznej
stretch — rozciąga, aby wypełnić rozmiar osi poprzecznej
baseline — wyrównuje linie bazowe tekstu

Praktyczny przykład

Nawigacja, w której większość elementów jest wyśrodkowana, ale ostatni przycisk jest wyrównany do końca:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Rozciąganie jednego elementu

Spraw, aby jedna karta rozciągała się na pełną wysokość, podczas gdy pozostałe dopasowują się do własnej zawartości:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto jako sposób wyrównywania

Automatyczne marginesy elementów flex przesuwają je same lub wraz z elementami sąsiednimi na przeciwną stronę. Jest to skuteczna alternatywa dla align-self przy wyśrodkowywaniu lub rozdzielaniu wolnego miejsca.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto — wyśrodkowanie w pionie

Automatyczne marginesy działają również w pionie. margin-top: auto wewnątrz kontenera flex z układem kolumnowym przesuwa element na dół:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Wyrównywanie względem linii bazowej

Wyrównywanie elementów względem linii bazowej tekstu zachowuje czytelne relacje między elementami o różnych rozmiarach:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (domyślnie)

align-self: auto oznacza, że element ma użyć wartości align-items kontenera. Wartość align-self trzeba ustawić tylko wtedy, gdy element ma odbiegać od domyślnego ustawienia kontenera.

Oś poprzeczna a oś główna

Pamiętaj: align-self zawsze działa na osi poprzecznej. Jeśli flex-direction: column, oś poprzeczna jest pozioma, więc align-self steruje położeniem w lewo lub w prawo.

Łączenie align-self z flex-grow

Często stosowany wzorzec: rozciągnięcie elementu, aby wypełnił wolne miejsce, ORAZ zastąpienie jego wyrównania na osi poprzecznej:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Wyrównywanie w Grid a Flexbox

CSS Grid udostępnia zarówno align-self (oś wierszy), jak i justify-self (oś kolumn), zapewniając kontrolę w dwóch wymiarach. W Flexbox align-self steruje tylko osią poprzeczną — na osi głównej używaj margin: auto.

Szybkie sprawdzenie

Kontener flex ma ustawienie align-items: center. Jeden element musi zostać wyrównany do początku osi poprzecznej. Jaką właściwość należy ustawić na tym elemencie?

Podsumowanie

align-self zastępuje ustawienie align-items kontenera flex dla pojedynczych elementów. Używaj go, aby zmienić wzorzec wyrównania dla konkretnych elementów. margin: auto jest uzupełniającym narzędziem, które rozdziela wolne miejsce i przesuwa elementy wzdłuż dowolnej osi.

Często zadawane pytania

Czy lekcja „Nadpisywanie wyrównania elementu flex za pomocą align-self” jest bezpłatna?

Tak — pełny tekst „Nadpisywanie wyrównania elementu flex za pomocą align-self” 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 „Nadpisywanie wyrównania elementu flex za pomocą align-self”?

Nauczy się Pan/Pani nadpisywać align-items kontenera dla pojedynczych elementów flex za pomocą align-self. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Nadpisywanie wyrównania elementu flex za pomocą align-self”?

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

Nadpisywanie wyrównania elementu flex za pomocą align-self
Właściwość order i zmiana kolejności wizualnej
Wzorce skróconej właściwości flex
Typowe układy Flexbox: nawigacja, karty i obiekt medialny

← Powrót do CSS Academy