🎯 Властивість align-content

Поточне значення:
stretch

Що таке align-content?

Властивість align-content визначає розподіл простору між рядками flex-елементів вздовж поперечної осі у flex-контейнері. Вона працює тільки тоді, коли є кілька рядків (коли flex-wrap: wrap або flex-wrap: wrap-reverse).

Важливо про stretch:

Значення stretch розтягує елементи, щоб вони заповнили весь контейнер. Для цього не повинно бути фіксованої висоти у елементів!

За замовчуванням, коли контейнер має flex-wrap: nowrap, ця властивість не має ефекту. Але коли елементи переносяться на кілька рядків, align-content дозволяє контролювати розподіл простору між цими рядками.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: stretch; /* Значення за замовчуванням */
}

/* Для stretch: без фіксованої висоти! */
.flex-container[data-align-content="stretch"] .flex-item {
  height: auto;
  min-height: 80px;
}

/* Для інших значень: фіксована висота */
.flex-container:not([data-align-content="stretch"]) .flex-item {
  height: 80px;
}

Оберіть значення align-content:

1
2
3
4
5
6
7
8

📝 Пояснення роботи align-content:

🎨 Інтерактивна демонстрація CSS Flexbox | Українська версія

align-content контролює розподіл рядків у багаторядкових flex-контейнерах!