Własność CSS justify-content

> Dodaj do ulubionych

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, jak stretch, 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:

Przykład działania ustawienia justify-content: center
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:

Przykład działania ustawienia justify-content: start
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:

Efekt zastosowania ustawienia justify-content: space-between
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:

Efekt zastosowania ustawienia justify-content: space-around
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:

Efekt zastosowania ustawienia justify-content: space-evenly
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 lub start, ponieważ w układzie CSS Flexbox o rozciąganiu elementów decyduje ustawienie własności flex-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

ZastosowanieKontenery blokowe, kontenery wielokolumnowe, kontenery flex
Obsługiwane wartościSłowa kluczowe flex-start, flex-end, left, right, center, space-between, space-around, space-evenly, stretch, start, end, safe, unsafe
Wartość początkowanormal
DziedziczenieNie
Specyfikacja CSSCSS Box Alignment Module Level 3, justify-content, CSS Flexible Box Layout Module Level 1, justify-content
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.