align-self: Indywidualne wyrównanie elementu wzdłuż osi poprzecznej

12.9. Właściwość `align-self`

Strona główna > Kurs CSS > Rozdział 12: Flexbox > Właściwość align-self

Indywidualne wyrównanie wzdłuż osi poprzecznej

Właściwość align-items, stosowana do kontenera flex, ustawia domyślne wyrównanie dla **wszystkich** elementów flex wzdłuż osi poprzecznej.

Właściwość align-self pozwala **nadpisać** to domyślne wyrównanie dla **pojedynczego elementu flex**. Stosuje się ją bezpośrednio do **elementu flex**, a nie do kontenera.

Dzięki align-self możemy sprawić, że jeden konkretny element będzie wyrównany inaczej niż pozostałe elementy w tej samej linii flex.

Możliwe wartości `align-self`

Właściwość align-self przyjmuje te same wartości co align-items, plus dodatkową wartość auto:

auto (wartość domyślna): Element dziedziczy wartość właściwości align-items swojego kontenera nadrzędnego. Jeśli nie ma kontenera nadrzędnego lub nie jest on kontenerem flex, wartość domyślna to stretch.
stretch: Element jest rozciągany, aby wypełnić kontener wzdłuż osi poprzecznej (jeśli nie ma zdefiniowanego rozmiaru w tym kierunku).
flex-start: Element jest wyrównywany do początku osi poprzecznej.
flex-end: Element jest wyrównywany do końca osi poprzecznej.
center: Element jest wyśrodkowywany wzdłuż osi poprzecznej.
baseline: Element jest wyrównywany do linii bazowej tekstu.

Przykład:

<div class="container">
  <div class="item">1</div>
  <div class="item special">2 (Specjalny)</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  align-items: flex-start; /* Domyślnie wszystkie elementy na górze */
  height: 150px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
  border: 1px solid navy;
}

.special {
  align-self: center; /* Ten konkretny element wyśrodkuj */
  background-color: lightcoral;
  height: 70px; /* Może mieć inną wysokość */
}

W powyższym przykładzie, mimo że kontener ma ustawione align-items: flex-start, element z klasą .special zostanie wyśrodkowany w pionie dzięki align-self: center.

Wizualizacja:

2 (center)

4 (flex-end)

5 (stretch)

(Kontener ma align-items: flex-start. Element 2 ma align-self: center, element 4 ma align-self: flex-end, a element 5 (bez zdefiniowanej wysokości) ma align-self: stretch.)

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz kontener flex z trzema elementami. Ustaw domyślne wyrównanie na center za pomocą align-items. Następnie dla drugiego elementu użyj align-self: flex-end;, aby umieścić go na dole kontenera.

Rozwiązanie:

HTML:

<div class="container-task1">
  <div class="item">A</div>
  <div class="item item-special">B</div>
  <div class="item">C</div>
</div>

CSS:

.container-task1 {
  display: flex;
  align-items: center; /* Domyślnie wyśrodkowane */
  height: 150px;
  border: 1px solid black;
  padding: 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}

.item-special {
  align-self: flex-end; /* Nadpisanie dla elementu B */
}

Efekt: Elementy A i C będą wyśrodkowane w pionie, a element B zostanie umieszczony na dole kontenera.

Zadanie 2 (do samodzielnego wykonania)

Stwórz kontener flex z czterema elementami. Ustaw domyślne wyrównanie na flex-start. Dla pierwszego elementu ustaw align-self: flex-end;, a dla ostatniego align-self: center;.

Zadanie 3 (do samodzielnego wykonania)

Stwórz kontener flex z kilkoma elementami bez zdefiniowanej wysokości. Domyślnie (align-items: stretch) powinny się rozciągnąć. Dla jednego z elementów ustaw align-self: flex-start; i nadaj mu konkretną wysokość (np. height: 40px;). Zaobserwuj efekt.

FAQ - Najczęściej zadawane pytania

Jaka jest domyślna wartość `align-self`?

Domyślną wartością jest auto, co oznacza, że element dziedziczy wartość align-items swojego kontenera flex.

Czy `align-self` działa w kontenerach wieloliniowych?

Tak, align-self działa również w kontenerach wieloliniowych. Pozwala ono na indywidualne wyrównanie elementu wzdłuż osi poprzecznej **w ramach jego własnej linii flex**.

Czy `align-self` może nadpisać `align-content`?

Nie, te właściwości kontrolują różne aspekty. align-content zarządza przestrzenią **między liniami flex**, podczas gdy align-self (i align-items) zarządza pozycją elementów **wewnątrz linii flex**. Nie wpływają one na siebie nawzajem.

Do czego stosuje się `align-self`?

align-self stosuje się bezpośrednio do **elementu flex** (dziecka kontenera flex), a nie do samego kontenera.

12.9. Właściwość align-self