justify-content
Оновлено: 29.03.2023
justify-content
Визначає, як браузер розподіляє простір навколо флекс-елементів уздовж головної осі контейнера. Це робиться після того, як застосовуються розміри й автоматичні відступи, за винятком ситуації, коли принаймні в одного елемента flex-grow більше нуля. При цьому не залишається жодного вільного простору для маніпулювання.
Коротка інформація
| Значення за замовчуванням | flex-start |
| Успадковується | Ні |
| Застосовується | До флекс-контейнерів |
| Анімується | Ні |
Синтаксис
justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly
Значення
| flex-start | Флекси притиснуті до початку рядка. |
| flex-end | Флекси притиснуті до кінця рядка. |
| center | Флекси вирівнюються по центру рядка. |
| space-between | Флекси рівномірно розподіляються по всьому рядку. Перший і останній елемент притискаються до відповідних країв контейнера. |
| space-around | Флекси рівномірно розподіляються по всьому рядку. Порожній простір перед першим і після останнього елементів дорівнює половині простору між двома сусідніми елементами. |
| space-evenly | Флекси розподіляються так, щоб відстань між будь-якими двома сусідніми елементами, а також перед першим і після останнього, була однаковою. |
Приклад
Об'єктна модель
Об'єкт.style.justifyContent
Примітка
Safari до версії 9 підтримує властивість -webkit-justify-content.