Значення stretch властивості align-items у CSS

Вивчаємо значення stretch властивості align-items та особливості розтягування flex-елементів по поперечній осі.

Значення stretch властивості align-items у CSS

Властивість align-items за замовчуванням має значення stretch. Воно розтягує flex-елементи вздовж поперечної осі контейнера.

Значення stretch працює тільки тоді, коли для елементів не заданий розмір у напрямку поперечної осі.

Наприклад, якщо головна вісь направлена зліва направо, то поперечна вісь буде направлена зверху вниз. У такому випадку stretch буде розтягувати елементи по висоті.

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

.parent {
  display: flex;

  height: 200px;
  border: 1px solid red;
}

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

Оскільки у блоків немає height, браузер автоматично розтягує їх на всю висоту контейнера.

.parent {
  display: flex;
  flex-direction: column;

  width: 300px;
  height: 300px;

  border: 1px solid red;
}

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

У цьому випадку елементи не мають заданої ширини, тому stretch розтягує їх на всю ширину контейнера.

❗ Важливо:

Якщо задати елементам width або height у напрямку поперечної осі, значення stretch перестане працювати.

.child {
  height: 50px;
  width: 50px;
}

align-items: stretch є значенням за замовчуванням.
Елементи розтягуються по поперечній осі.
Stretch працює тільки без заданого розміру по цій осі.
Для відключення розтягування можна використовувати align-items: flex-start або center.

📌 Завдання:

№1. Створіть flex-контейнер висотою 300px.
№2. Додайте декілька дочірніх блоків без height.
№3. Перевірте роботу align-items: stretch.
№4. Додайте height блокам і порівняйте результат.

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

Якщо flex-елементи несподівано розтягуються — перевірте значення align-items. За замовчуванням воно дорівнює stretch.

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

.parent {
  display: flex;
  align-items: stretch;
}