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

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

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

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

Крайні елементи також отримують відступ від країв батьківського контейнера.

На перший погляд може здатися, що всі відстані однакові, але це не так.

Відстань між flex-елементами буде у два рази більшою, ніж відстань від крайнього елемента до межі контейнера.

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

❗ Важливо:

space-around створює відступи з усіх сторін елементів. Через об'єднання сусідніх відступів проміжки між елементами виходять більшими.

justify-content: space-around розподіляє вільний простір навколо елементів.
Кожен flex-елемент отримує відступ зліва і справа.
Проміжки між елементами у два рази більші за крайні відступи.
Елементи не притискаються до країв контейнера.

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

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

📌 Завдання:

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

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

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

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

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