align-content: Wyrównanie linii w wieloliniowym kontenerze Flexbox

12.8. Właściwość `align-content`

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

Wyrównanie linii flex wzdłuż osi poprzecznej

Właściwość align-content jest stosowana do **kontenera flex** i ma zastosowanie tylko wtedy, gdy kontener jest **wieloliniowy**, czyli gdy flex-wrap jest ustawione na wrap lub wrap-reverse i elementy flex faktycznie zajmują więcej niż jedną linię.

align-content definiuje, jak **linie flex** są rozmieszczone i wyrównane względem siebie wzdłuż **osi poprzecznej (cross axis)**. Kontroluje ona dystrybucję wolnej przestrzeni pozostałej w kontenerze wzdłuż osi poprzecznej, gdy suma rozmiarów linii flex jest mniejsza niż rozmiar kontenera w tym kierunku.

Ważne: align-content **nie ma efektu**, jeśli wszystkie elementy flex mieszczą się w jednej linii (kontener jednowierszowy).

Pamiętaj, że oś poprzeczna jest pionowa przy flex-direction: row i pozioma przy flex-direction: column.

Możliwe wartości `align-content`

Właściwość align-content przyjmuje wartości podobne do justify-content, ale działające wzdłuż osi poprzecznej dla linii:

stretch (wartość domyślna):
- Linie flex są rozciągane, aby wypełnić całą dostępną przestrzeń w kontenerze wzdłuż osi poprzecznej.
- Każda linia otrzymuje równą część dodatkowej przestrzeni.
```
.container { display: flex; flex-wrap: wrap; align-content: stretch; /* Domyślne */ height: 300px; }
```
flex-start:
- Linie flex są pakowane na początku osi poprzecznej (na górze przy row, po lewej przy column).
- Cała wolna przestrzeń znajduje się na końcu osi poprzecznej.
```
.container { display: flex; flex-wrap: wrap; align-content: flex-start; height: 300px; }
```
flex-end:
- Linie flex są pakowane na końcu osi poprzecznej (na dole przy row, po prawej przy column).
- Cała wolna przestrzeń znajduje się na początku osi poprzecznej.
```
.container { display: flex; flex-wrap: wrap; align-content: flex-end; height: 300px; }
```
center:
- Linie flex są grupowane na środku osi poprzecznej.
- Wolna przestrzeń jest równo rozdzielana na początku i na końcu osi poprzecznej.
```
.container { display: flex; flex-wrap: wrap; align-content: center; height: 300px; }
```
space-between:
- Pierwsza linia flex jest na początku osi poprzecznej, ostatnia na końcu.
- Pozostała wolna przestrzeń jest równo rozdzielana **pomiędzy** liniami flex.
- Brak przestrzeni przed pierwszą i za ostatnią linią.
```
.container { display: flex; flex-wrap: wrap; align-content: space-between; height: 300px; }
```
space-around:
- Wolna przestrzeń jest równo rozdzielana **wokół** każdej linii flex.
- Odstępy między liniami są dwa razy większe niż odstęp przed pierwszą i za ostatnią linią.
```
.container { display: flex; flex-wrap: wrap; align-content: space-around; height: 300px; }
```
space-evenly: (Wsparcie może być nieco mniejsze niż dla pozostałych)
- Wolna przestrzeń jest równo rozdzielana **pomiędzy** każdą linią oraz **przed pierwszą i za ostatnią** linią.
- Wszystkie odstępy (przed pierwszą, między liniami, za ostatnią) są równe.
```
.container { display: flex; flex-wrap: wrap; align-content: space-evenly; height: 300px; }
```

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

align-content: stretch; (domyślne)

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

(Powyżej znajduje się prosta wizualizacja działania różnych wartości align-content. Kontener ma szerokość ok. 180px, a elementy 50px, więc mieszczą się 3 w linii. Kontener ma wysokość 150px.)

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz kontener flex o stałej wysokości (np. 300px) i szerokości (np. 200px). Umieść w nim 6 elementów, każdy o szerokości 80px i wysokości 80px. Użyj flex-wrap: wrap; i align-content: center;, aby linie flex (będą 3 linie po 2 elementy) zostały wyśrodkowane w pionie w kontenerze.

Rozwiązanie:

HTML:

<div class="container-task1">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>

CSS:

.container-task1 {
  display: flex;
  flex-wrap: wrap; /* Włącz zawijanie */
  align-content: center; /* Wyśrodkuj linie w pionie */
  width: 200px; /* Szerokość kontenera */
  height: 300px; /* Wysokość kontenera */
  border: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}

.item {
  width: 80px; /* Szerokość elementu */
  height: 80px; /* Wysokość elementu */
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px;
  box-sizing: border-box;
  display: flex; /* Dla wyśrodkowania tekstu wewnątrz */
  justify-content: center;
  align-items: center;
}

Efekt: W kontenerze pojawią się 3 linie po 2 elementy. Cały blok tych trzech linii zostanie wyśrodkowany w pionie wewnątrz kontenera o wysokości 300px.

Zadanie 2 (do samodzielnego wykonania)

Skopiuj rozwiązanie z Zadania 1 i zmień align-content na space-between. Zaobserwuj, jak linie rozkładają się w pionie.

Zadanie 3 (do samodzielnego wykonania)

Stwórz kontener flex z flex-direction: column, flex-wrap: wrap, stałą wysokością i szerokością. Umieść w nim wystarczająco dużo elementów, aby zawinęły się do drugiej kolumny. Użyj align-content: flex-end;, aby zgrupować kolumny po prawej stronie kontenera.

FAQ - Najczęściej zadawane pytania

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

Domyślną wartością jest stretch. Oznacza to, że jeśli jest wolna przestrzeń wzdłuż osi poprzecznej, linie flex zostaną rozciągnięte, aby ją wypełnić.

Kiedy `align-content` ma efekt?

align-content ma efekt tylko wtedy, gdy kontener flex jest wieloliniowy (flex-wrap: wrap lub wrap-reverse) i jest więcej niż jedna linia flex. W kontenerze jednowierszowym ta właściwość jest ignorowana.

Czym się różni `align-content: center` od `align-items: center`?

align-items: center wyśrodkowuje elementy **wewnątrz każdej linii** flex wzdłuż osi poprzecznej. align-content: center wyśrodkowuje **całe linie flex** względem siebie w kontenerze wieloliniowym. Jeśli masz tylko jedną linię, align-content nie działa, a align-items wyśrodkuje elementy w tej linii.

Czy `align-content` działa z `flex-direction: column`?

Tak, działa. Jeśli masz flex-direction: column i flex-wrap: wrap, oś poprzeczna jest pozioma. align-content będzie wtedy kontrolować rozkład przestrzeni i wyrównanie **kolumn flex** w poziomie.

12.8. Właściwość align-content