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

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

Приклади

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/vREMKq/'>vREMKq</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/WEjOPx/'>justify-content-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/RZVZNb/'>justify-content-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/eMmozy/'>eMmozy</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.