Вирівнювання flex-елементів з рівними відступами в CSS

Вивчаємо значення space-evenly властивості justify-content для створення однакових відстаней між flex-елементами та краями контейнера.

Вирівнювання flex-елементів з рівними відступами в CSS

Значення space-around часто не дає потрібного результату, оскільки відстані між елементами та краями контейнера виходять різними.

Для створення абсолютно однакових проміжків використовується значення space-evenly.

При використанні space-evenly всі відступи стають однаковими: між елементами, а також між крайніми елементами та межами батьківського контейнера.

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

❗ Важливо:

На відміну від space-around, значення space-evenly створює повністю рівні проміжки без подвоєння відстаней між елементами.

justify-content: space-evenly рівномірно розподіляє вільний простір.
Усі відступи мають однаковий розмір.
Проміжки між елементами дорівнюють крайнім відступам.
Зручно використовувати для меню, карток та навігації.

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

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

📌 Завдання:

№1. Створіть flex-контейнер із трьома дочірніми блоками.
№2. Додайте justify-content: space-evenly.
№3. Порівняйте результат із space-around та space-between.

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

Використовуйте space-evenly, коли потрібно отримати однакові відстані між усіма елементами та краями контейнера.

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

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