Урок 24. Решения: Выравнивание: justify-content, align-items, gap

📁 Раздел: Flexbox ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#align-items #align-content #gap #row-gap #align-self #flex-grow #flex-shrink #flex-basis

⚡ Кратко

Свойства контейнера — на родителе (align-items, gap), свойства элемента — на ребёнке (align-self, flex).

Решения заданий

Задание 1 — align-items: center

A B C
📄 lesson-24/solution.css
.row {
  display: flex;
  min-height: 120px;
  align-items: center; /* по центру поперечной оси */
}

Задание 2 — align-self у среднего блока

A B ⤓ C 
.row { display: flex; align-items: center; }
.row .b { align-self: flex-end; } /* только B к низу */

Задание 3 — gap: 20px

A B C 
.row { display: flex; gap: 20px; } /* без margin */

Задание 4 — поле тянется через flex: 1

🔍 
.bar { display: flex; align-items: center; gap: 10px; }
.bar input { flex: 1; } /* поле занимает всё свободное место */
Главное: display: flex — на родителе; align-items и gap — тоже на родителе; align-self и flex — на дочерних элементах.

Навигация