Вирівнювання окремого flex-елемента в CSS

Вивчаємо властивість align-self, яка дозволяє змінювати вирівнювання окремого flex-елемента незалежно від інших елементів.

Вирівнювання окремого flex-елемента в CSS

Раніше ми використовували властивість align-items для вирівнювання всіх flex-елементів у контейнері. Властивість align-self працює інакше — вона дозволяє налаштувати вирівнювання тільки одного конкретного елемента.

align-self працює по поперечній осі та перевизначає значення align-items для вибраного елемента.

<div class="parent">
  <div class="child">1</div>
  <div class="child elem">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}

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

.elem {
  align-self: flex-start;
}

auto — використовує значення align-items батьківського контейнера.
flex-start — притискає елемент до початку поперечної осі.
flex-end — притискає елемент до кінця поперечної осі.
center — розташовує елемент по центру.
stretch — розтягує елемент по поперечній осі.

❗ Важливо:

align-self має сенс тільки для flex-елементів. Якщо елемент не знаходиться всередині flex-контейнера, властивість не працюватиме.

Практичні завдання

📌 Завдання:

№1. Створіть flex-контейнер із п'ятьма блоками.
№2. Вирівняйте всі блоки по центру через align-items.
№3. Для третього блоку задайте align-self: flex-end.
№4. Перевірте роботу значень center, flex-start та flex-end.

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

Якщо потрібно змінити положення тільки одного елемента — використовуйте align-self замість зміни align-items.

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

.elem {
  align-self: flex-end;
}