align-items: Wyrównanie elementów wzdłuż osi poprzecznej w CSS Flexbox

12.7. Właściwość `align-items`

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

Wyrównanie wzdłuż osi poprzecznej

Właściwość align-items jest stosowana do **kontenera flex** i definiuje domyślne wyrównanie dla wszystkich elementów flex **wzdłuż osi poprzecznej (cross axis)** w ramach bieżącej linii flex.

Można ją traktować jako odpowiednik justify-content, ale działający w kierunku prostopadłym do osi głównej.

Pamiętaj, że oś poprzeczna jest pionowa przy flex-direction: row (domyślnie) i pozioma przy flex-direction: column. Zatem align-items kontroluje wyrównanie **pionowe** dla wierszy i **poziome** dla kolumn.

Możliwe wartości `align-items`

Właściwość align-items może przyjmować kilka wartości:

stretch (wartość domyślna):
- Elementy flex są rozciągane, aby wypełnić całą wysokość (przy row) lub szerokość (przy column) kontenera wzdłuż osi poprzecznej.
- Warunkiem jest, aby elementy nie miały zdefiniowanego rozmiaru (height przy row, width przy column) lub miały ustawione auto.
```
.container { display: flex; align-items: stretch; /* Domyślne */ height: 150px; /* Nadaj wysokość kontenerowi */ }
```
```

```

flex-start:

Elementy są wyrównywane do początku osi poprzecznej (do góry przy row, do lewej przy column).

.container { display: flex; align-items: flex-start; height: 150px; }

<!-- Elementy będą na górze kontenera -->

flex-end:

Elementy są wyrównywane do końca osi poprzecznej (do dołu przy row, do prawej przy column).

.container { display: flex; align-items: flex-end; height: 150px; }

<!-- Elementy będą na dole kontenera -->

center:

Elementy są wyśrodkowywane wzdłuż osi poprzecznej.

.container { display: flex; align-items: center; height: 150px; }

<!-- Elementy będą na środku kontenera w pionie -->

baseline:

Elementy są wyrównywane tak, aby ich **linie bazowe tekstu** znalazły się na tej samej wysokości.
Przydatne, gdy elementy flex zawierają tekst o różnych rozmiarach czcionek.

.container { display: flex; align-items: baseline; }

<div class="container">
  <div style="font-size: 16px;">Tekst</div>
  <div style="font-size: 32px;">Tekst</div>
  <div style="font-size: 12px;">Tekst</div>
</div>
<!-- Linie bazowe tekstu wewnątrz divów będą wyrównane -->

Wizualizacja (dla flex-direction: row i kontenera o stałej wysokości):

align-items: stretch; (domyślne)

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

1 Aa

2 Aa

3 Aa

(Powyżej znajduje się prosta wizualizacja działania różnych wartości align-items przy flex-direction: row. Zwróć uwagę, że dla stretch elementy nie mają zdefiniowanej wysokości, a dla pozostałych mają różne wysokości, aby pokazać efekt wyrównania.)

Różnica między `align-items` a `align-content`

Ważne jest, aby nie mylić align-items z align-content:

align-items: Wyrównuje elementy **wewnątrz pojedynczej linii flex** wzdłuż osi poprzecznej. Działa zarówno w kontenerach jedno-, jak i wieloliniowych.
align-content: Wyrównuje **całe linie flex** względem siebie w kontenerze **wieloliniowym** (gdy flex-wrap jest ustawione na wrap lub wrap-reverse i jest więcej niż jedna linia). Nie ma efektu w kontenerze jednowierszowym.

Właściwość align-content zostanie omówiona w następnej lekcji.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz kontener flex o stałej wysokości (np. 200px) z trzema elementami o różnej wysokości. Użyj align-items: center;, aby wyśrodkować je w pionie.

Rozwiązanie:

HTML:

<div class="container-task1">
  <div class="item" style="height: 50px;">A</div>
  <div class="item" style="height: 100px;">B</div>
  <div class="item" style="height: 70px;">C</div>
</div>

CSS:

.container-task1 {
  display: flex;
  align-items: center; /* Wyśrodkowanie wzdłuż osi poprzecznej (pionowej) */
  height: 200px; /* Wysokość kontenera */
  border: 1px solid black;
  padding: 10px;
}

.item {
  width: 50px; /* Szerokość dla wizualizacji */
  padding: 15px;
  margin: 5px;
  background-color: #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}

Efekt: Trzy szare pudełka o różnych wysokościach zostaną wyśrodkowane w pionie wewnątrz kontenera.

Zadanie 2 (do samodzielnego wykonania)

Stwórz kontener flex z kilkoma elementami zawierającymi tekst o różnych rozmiarach czcionki. Użyj align-items: baseline;, aby wyrównać je do linii bazowej tekstu.

Zadanie 3 (do samodzielnego wykonania)

Stwórz kontener flex z flex-direction: column; i nadaj mu szerokość (np. width: 400px;). Umieść w nim trzy elementy o różnej szerokości. Użyj align-items: flex-end;, aby wyrównać je do prawej krawędzi kontenera (pamiętaj, że oś poprzeczna jest teraz pozioma).

FAQ - Najczęściej zadawane pytania

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

Domyślną wartością jest stretch. Oznacza to, że elementy flex (jeśli nie mają określonego rozmiaru wzdłuż osi poprzecznej) będą próbowały rozciągnąć się, aby wypełnić całą przestrzeń kontenera wzdłuż tej osi.

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

Tak, align-items działa w kontenerach wieloliniowych, ale wyrównuje elementy **wewnątrz każdej linii** niezależnie. Do kontrolowania wyrównania samych linii względem siebie służy align-content.

Co jeśli element ma ustawiony rozmiar (np. `height`) a `align-items` jest `stretch`?

Jeśli element flex ma jawnie ustawiony rozmiar wzdłuż osi poprzecznej (np. height przy flex-direction: row), wartość stretch dla align-items nie będzie miała na niego wpływu - element zachowa swój zdefiniowany rozmiar.

Czy mogę ustawić inne wyrównanie dla pojedynczego elementu?

Tak, do nadpisania wartości align-items dla pojedynczego elementu flex służy właściwość align-self, którą stosuje się bezpośrednio do tego elementu. Zostanie ona omówiona w jednej z kolejnych lekcji.

12.7. Właściwość align-items