Własność CSS align-content określa sposób wyrównania rzędów elementów względem osi blokowej, kolumnowej lub poprzecznej kontenera, zależnie od rodzaju układu, w którym została zastosowana.
Jest to własność własność logiczna, czyli zależna od kierunku i orientacji tekstu, więc w uproszczeniu można powiedzieć, że w standardowych dokumentach w języku polskim określa ona wyrównanie elementów w pionie.
Na przykład w przypadku układu CSS Flexbox własność ta odnosi się do rzędów jednostek flex na osi poprzecznej kontenera flex. Własność ta działa tylko wtedy, gdy w kontenerze na osi poprzecznej dostępna jest wolna przestrzeń oraz tylko w kontenerach wielorzędowych (zawierających przynajmniej dwa rzędy elementów na osi poprzecznej).
Wartości i składnia
Własność align-content
przyjmuje następujące wartości:
normal
- Domyślne wyrównanie elementów, tak jakby własność
align-content
nie była ustawiona. Działa tak samo, jakstretch
, czyli rozciąga elementy na całą dostępną przestrzeń, jeśli nie mają one rozmiaru ustalonego przez inną własność. center
- Wyrównanie elementów w kontenerze do środka osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do środka w pionie), np.:
div { align-content: center; }
Przykładowy efekt:
start
- Wyrównanie elementów w kontenerze do początku osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do górnej krawędzi kontenera), np.:
div { align-content: start; }
Przykładowy efekt:
end
- Wyrównanie elementów w kontenerze do końca osi poprzecznej, blokowej lub kolumnowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do dolnej krawędzi kontenera).
flex-start
- Wyrównanie jednostek flex w kontenerze flex do początku jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do górnej krawędzi kontenera). Ta własność odnosi się do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest dzieckiem kontenera flex, to zostanie potraktowana jako
start
. flex-end
- Wyrównanie jednostek flex w kontenerze flex do końca jego osi poprzecznej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do dolej krawędzi kontenera). Ta własność odnosi się do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest dzieckiem kontenera flex, to zostanie potraktowana jako
end
. baseline
- Synonim wartości
first baseline
first baseline
- Wyrównanie do pierwszej linii bazowej
last baseline
- Wyrównanie do ostatniej linii bazowej
space-between
- Równomierne rozmieszczenie elementów wzdłuż osi poprzecznej od jej początku do końca. Inaczej mówiąc, pierwszy element znajduje się pod krawędzią początkową kontenera, ostatni — pod krawędzią końcową, a odstępy między elementami są zawsze takie same, np.:
div { align-content: space-between; }
Przykładowy efekt:
space-around
- Równomierne rozmieszczenie elementów wzdłuż osi poprzecznej, blokowej lub kolumnowej w taki sposób, że odstęp między każdymi dwoma elementami jest taki sam, a pierwszy element od krawędzi początkowej kontenera i ostatni element od krawędzi końcowej kontenera są oddalone na odległość równą połowie odległości między elementami, np.:
div { align-content: space-around; }
Przykładowy efekt:
space-evenly
- Równomierne rozmieszczenie elementów wzdłuż osi poprzecznej, blokowej lub kolumnowej w taki sposób, że odstęp między każdymi dwoma elementami oraz między pierwszym elementem a krawędzią początkową kontenera i ostatnim elementem a krawędzią końcową kontenera są takie same:
div { align-content: space-evenly; }
Przykładowy efekt:
stretch
- Rozciągnięcie elementów w kontenerze na całą dostępną przestrzeń wzdłuż osi poprzecznej, blokowej lub kolumnowej.
safe
- Jest to modyfikator, który można stosować z każdym z poprzednich słów kluczowych. Oznacza, że jeśli wybrane ustawienie powoduje wyjście treści poza kontener, przez co część danych może być niewidoczna, to zostanie zastosowane wyrównanie
start
. unsafe
- Odwrotność modyfikatora
safe
. Ustawienie zostanie zastosowane niezależnie od tego, czy może doprowadzić do utraty danych przez wyjście treści poza kontener, czy nie.
Podsumowanie
Zastosowanie | Kontenery blokowe, kontenery wielokolumnowe, kontenery flex |
---|---|
Obsługiwane wartości | Słowa kluczowe flex-start , flex-end , center , space-between , space-around , space-evenly , stretch , start , end , baseline , first baseline , last baseline , safe , unsafe |
Wartość początkowa | normal |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Box Alignment Module Level 3, align-content, CSS Flexible Box Layout Module Level 1, align-content |