Własność CSS justify-content określa sposób wyrównania elementów względem osi głównej kontenera flex albo osi śródliniowej kontenera grid i kontenera wielokolumnowego. Jest to 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 poziomie.
Wartości i składnia
Własność justify-content
przyjmuje następujące wartości:
normal
- Domyślne wyrównanie elementów, tak jakby własność
justify-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 głównej lub śródliniowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do środka w poziomie), np.:
div { justify-content: center; }
Przykładowy efekt:
start
- Wyrównanie elementów w kontenerze do początku osi głównej lub śródliniowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do lewej krawędzi kontenera), np.:
div { justify-content: start; }
Przykładowy efekt:
end
- Wyrównanie elementów w kontenerze do końca osi głównej lub śródliniowej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do prawej krawędzi kontenera).
flex-start
- Wyrównanie jednostek flex w kontenerze flex do początku jego osi głównej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do lewej krawędzi kontenera). Ta własność odnosi się tylko do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest kontenerem flex, to zostanie potraktowana jako
start
. flex-end
- Wyrównanie jednostek flex w kontenerze flex do końca jego osi głównej (w przypadku standardowych tekstów w języku polskim oznacza to wyrównanie elementów do prawej krawędzi kontenera). Ta własność odnosi się tylko do kontenerów flex. Jeśli zostanie zastosowana do elementu, który nie jest kontenerem flex, to zostanie potraktowana jako
end
. left
- Wyrównanie do lewej krawędzi logicznej lub fizycznej elementu.
right
- Wyrównanie do prawej krawędzi logicznej lub fizycznej elementu.
space-between
- Równomierne rozmieszczenie elementów wzdłuż osi głównej 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 { justify-content: space-between; }
Przykładowy efekt:
space-around
- Równomierne rozmieszczenie elementów wzdłuż osi głównej lub śródliniowej 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 { justify-content: space-around; }
Przykładowy efekt:
space-evenly
- Równomierne rozmieszczenie elementów wzdłuż osi głównej lub śródliniowej 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 { justify-content: space-evenly; }
Przykładowy efekt:
stretch
- Rozciągnięcie elementów w kontenerze na całą dostępną przestrzeń wzdłuż osi głównej lub śródliniowej. W kontenerach flex wartość ta działa jak
flex-start
lubstart
, ponieważ w układzie CSS Flexbox o rozciąganiu elementów decyduje ustawienie własnościflex-grow
. 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 , left , right , center , space-between , space-around , space-evenly , stretch , start , end , safe , unsafe |
Wartość początkowa | normal |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Box Alignment Module Level 3, justify-content, CSS Flexible Box Layout Module Level 1, justify-content |