css властивість justify-content


Властивість justify-content вирівнює елементи гнучкого контейнера, коли елементи не використовують ввесь доступний простір на головній осі контейнера (по горизонталі). Це робиться після того, як застосовуються розміри і автоматичні відступи, за винятком ситуації, коли принаймні у одного елемента flex-grow більше нуля. При цьому не залишається ніякого вільного простору для маніпулювання.

Властивість `justify-content`

Властивість вирівнює елементи по головні осі поточної лінії контейнера. Визначає розподілення вільного простору між нащадками.

Вирівнювання впливає на елементами якщо задані довжина та відступи (тому допустимі значення auto для відступів). Тому, якщо хоча б один із нащадків має заданий flex-grow зі значенням 0, використання justify-content не матиме ефекту.

Порада:

Використовуйте властивість align-items для вирівнювання елементів на поперечної осі (по вертикалі).

Нотатка:

Хоча початково властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток (CSS Grid).

Синтаксис

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

Властивість justify-content може отримувати 7 значень:

flex-start

Елементи розташовані на початку контейнера. Значення без задання.

flex-end

Елементи розташовані в кінці контейнера.

center

Елементи розташовані в центрі контейнера.

space-between

Флекси рівномірно розподіляються по всьому рядку. Перший і останній флекс притискаються до відповідних країв контейнера.

space-around

Флекси рівномірно розподіляються по всьому рядку. Порожній простір перед першим і після останнього елементів дорівнює половині простору між двома сусідніми елементами.

initial

Встановлює цю властивість в значення без задання.

inherit

Успадкує значення властивості від свого батьківського елемента.

Значення без задання: flex-start
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.justifyContent="space-between"

Переглядачі

Переглядач
justify-content

29.0

11.0

28.0

9.0

12.1

13.0

Переглядач
justify-content

4.4

28.0

9.2


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація дії різних значень властивості

Простий приклад роботи властивості

Приклад роботи властивості

Додаткові посилання