CSS justify-content ιδιότητα

Ορισμός και χρήση

Η ιδιότητα justify-content ισορροπεί τα στοιχεία του ελαστικού περιβάλλοντος (στο επίπεδο του οριζόντιου άξονα) όταν τα στοιχεία δεν καταλαμβάνουν όλο το διαθέσιμο χώρο του άξονα.

Σημείωση:Συμβουλή: align-items ιδιότητα Αξιοποιήστε την ιδιότητα vertical-align για να ισορροπήσετε τα στοιχεία.

Δείτε επίσης:

CSS Εκμάθηση:CSS flexbox

CSS Εκμάθηση:CSS Grid

CSS Reference Manual:align-content ιδιότητα

CSS Reference Manual:align-items ιδιότητα

CSS Reference Manual:align-self attribute

HTML DOM Reference Manual:justifyContent attribute

Пример

Центрировать эластичные элементы в центре контейнера:

div {
  display: flex;
  justify-content: center;
}

Попробуйте сами

Более примеров TIY можно найти в нижней части страницы.

CSS syntax

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

Значение атрибута

Значение Описание
flex-start Значение по умолчанию. Элементы расположены в начале контейнера.
flex-end Элементы расположены в конце контейнера.
center Элементы расположены в центре контейнера.
space-between Элементы оставляют интервал между строками.
space-around Элементы оставляют пространство перед строкой, между строками и после строки.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Инherit this property from its parent element. См. также: inherit.

Технические детали

Значение по умолчанию: flex-start
Наследование: Нет
Анимация: Не поддерживается. См. также:Анимационные свойства.
Версия: CSS3
JavaScript syntax: object.style.justifyContent="space-between"

Более примеров

Пример

Центрировать эластичные элементы в начале контейнера (по умолчанию):

div {
  display: flex;
  justify-content: flex-start;
}

Попробуйте сами

Пример

Центрировать эластичные элементы в конце контейнера:

div {
  display: flex;
  justify-content: flex-end;
}

Попробуйте сами

Пример

Показывать эластичные элементы с интервалом между строками:

div {
  display: flex;
  justify-content: space-between;
}

Попробуйте сами

Пример

Показывать эластичные элементы с интервалом перед строкой, между строками и после строки:

div {
  display: flex;
  justify-content: space-around;
}

Попробуйте сами

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут, и следуют правилам использования префиксов -webkit- или -moz- для первой версии.

свойства 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