Вирівнювання flex-елементів по краях батька в CSS

Вивчаємо значення space-between властивості justify-content для рівномірного розподілу flex-елементів.

Вирівнювання flex-елементів по краях батька в CSS

Властивість justify-content має значення space-between, яке дозволяє рівномірно розподілити flex-елементи всередині контейнера.

При використанні space-between перший елемент притискається до лівого краю, а останній — до правого.

Відстань між усіма елементами розраховується браузером автоматично.

.parent {
  display: flex;
  justify-content: space-between;
}

❗ Важливо:

space-between не додає відступів перед першим і після останнього елемента. Вільний простір розподіляється тільки між ними.

justify-content керує розташуванням по головній осі.
space-between розподіляє вільний простір між елементами.
Перший елемент притискається до початку контейнера.
Останній елемент притискається до кінця контейнера.

.parent {
  display: flex;
  width: 400px;
  justify-content: space-between;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

📌 Завдання:

№1. Створіть flex-контейнер із трьома дочірніми блоками.
№2. Додайте justify-content: space-between.
№3. Змініть ширину контейнера та подивіться, як змінюється відстань між елементами.

💡 Показати підказку

Порівняйте space-between із center. У center всі елементи групуються разом, а у space-between займають всю ширину контейнера.

✅ Показати відповідь

.parent {
  display: flex;
  justify-content: space-between;
}