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

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

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

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

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

автор: Svitlana

Порада: Використовуйте властивість align-items для вирівнювання елементів на поперечної осі (по вертикалі).
автор: Svitlana
Нотатка: Хоча початково властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток (CSS Grid).
автор: Svitlana

Синтаксис

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

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

flex-start

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

автор: Svitlana

flex-end

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

автор: Svitlana

center

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

автор: Svitlana

space-between

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

автор: Svitlana

space-around

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

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

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