Atrybut CSS justify-content

Definicja i użycie

justify-content atrybut (poziomo) wyrównuje elementy kontenera elastycznego, gdy elementy nie zajmują wszystkich dostępnych przestrzeni osi głównej.

Wskazówka:Użyj align-items atrybut Wyrównaj elementy wertykalnie.

Zobacz również:

CSS podręcznik:Flexbox CSS

CSS podręcznik:CSS Grid

CSS 参考手册：align-content atrybut

CSS 参考手册：align-items atrybut

CSS 参考手册：Podręcznik CSS

Właściwość align-selfPodręcznik HTML DOM

justify-content: space-between;

Właściwość justifyContent

Wyświetlaj elastyczne elementy z odstępami przed wierszem, między wierszami i po wierszu:
  div {
  Wyśrodkuj elastyczne elementy w centrum kontenera:
justify-content: space-around;

}

justify-content: center;

Więcej przykładów TIY można znaleźć na dole strony.

Gramatyka CSS

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Wartość atrybutu Wartość
Domyślna wartość: Opis
Domyślna wartość. Elastyczne elementy znajdują się na początku kontenera. flex-end
Elastyczne elementy znajdują się na końcu kontenera. center
Elastyczne elementy znajdują się w centrum kontenera. space-between
Elastyczne elementy pozostawiają odstęp między wierszami. space-around
Ustaw tę właściwość na jej wartość domyślną. Zobacz: Elastyczne elementy pozostawiają przestrzeń przed wierszem, między wierszami i po wierszu. Ustaw tę właściwość na jej wartość domyślną. Zobacz:Atrybuty animacji
Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: initial Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz:Atrybuty animacji

inherit

Szczegóły techniczne Domyślna wartość:
flex-start Dziedziczenie:
Nie Tworzenie animacji:Nieobsługiwane. Zobacz:Atrybuty animacji
。 Wersja:
CSS3 Gramatyka JavaScript:

object.style.justifyContent="space-between"

justify-content: space-between;

Więcej przykładów

Wyświetlaj elastyczne elementy z odstępami przed wierszem, między wierszami i po wierszu:
  div {
  Wyśrodkuj elastyczne elementy na początku kontenera (domyślnie):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Wyświetlaj elastyczne elementy z odstępami przed wierszem, między wierszami i po wierszu:
  div {
  Wyśrodkuj elastyczne elementy na końcu kontenera:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Wyświetlaj elastyczne elementy z odstępami przed wierszem, między wierszami i po wierszu:
  div {
  Wyświetlaj elastyczne elementy z odstępami między wierszami:
justify-content: space-around;

}

justify-content: space-between;

Przykład

Wyświetlaj elastyczne elementy z odstępami przed wierszem, między wierszami i po wierszu:
  div {
  display: flex;
justify-content: space-around;

}

Spróbuj sam

Właściwości przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość, z wstawiennikiem -webkit- lub -moz-.

właściwość Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0