Урок 25. Решения: Практические шаблоны Flexbox

📁 Раздел: Flexbox ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя

Решения пяти заданий с живым результатом. Ключ во всех — display: flex на родителе; свойства контейнера не переносим на детей.

Решения

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card { flex: 1 1 200px; }

ИК

Иван Кузнецов
Аватар фиксированный, текст занимает весь остаток.

.media { display: flex; gap: 12px; align-items: flex-start; }
.media__avatar { flex: 0 0 56px; }
.media__text { flex: 1; }

Header

main с flex:1 растёт

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1; }

Главный принцип: display: flex ставим родителю. Перенос — это flex-wrap, расстояния — gap, «занять остаток» — flex: 1.