Атрибут CSS justify-content

Определение и использование

justify-content свойство (горизонтально) выравнивает элементы эластичного контейнера, когда элементы не занимают все доступное пространство на главном оси.

Совет:Используйте align-items свойство Вертикальная выравнивание элементов.

Дополнительная литература:

CSS учебник:Flexbox в CSS

CSS учебник:CSS Grid

CSS справочник:align-content свойство

CSS справочник:align-items свойство

CSS справочник:Свойство align-self

HTML DOM справочник:Свойство justifyContent

Пример

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

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

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

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

CSS синтаксис

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

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

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

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

Default: flex-start
Инherit: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: 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;
}

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

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

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

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

атрибут 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