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

📁 Раздел: Flexbox ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#display #flex-direction #justify-content #align-items #flex-wrap #gap

⚡ Кратко

Топ-3 ловушки: (1) свойства контейнера написаны на элементе; (2) забыли min-height: 100vh — sticky-footer не прилипает; (3) при flex-direction: column перепутали оси, поэтому центрирование «не туда».

Типичные ошибки

Ошибка 1. Свойство контейнера написано на элементе

justify-content работает только на контейнере с display: flex. На обычном дочернем блоке оно просто игнорируется — элементы остаются слева.

❌ Как ломается: justify-content на элементе — ничего не центрируется

Остался слева

✅ Как правильно: justify-content на контейнере

По центру
/* ❌ не сработает */
.box { justify-content: center; }

/* ✅ свойство — на родителе */
.parent {
  display: flex;
  justify-content: center;
}

Ошибка 2. Sticky-footer без min-height

Симптом: подвал «прилипает» к концу контента и висит посреди экрана, когда контента мало. Причина — у страницы-колонки нет min-height: 100vh, поэтому main с flex: 1 нечего растягивать.
/* ❌ забыли высоту — растягиваться не от чего */
.page { display: flex; flex-direction: column; }

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

Ошибка 3. Перепутаны оси при column

Симптом: поставили flex-direction: column и удивились, что justify-content теперь управляет вертикалью, а align-items — горизонталью. При смене направления главная и поперечная оси меняются местами.

Ошибка 4. margin-хаки вместо gap

Проблема: промежутки между карточками через margin-right дают лишний отступ у крайнего элемента и ломаются при переносе. Используйте gap — он расставляет промежутки только между элементами.
Диагностика: включите Flexbox overlay в DevTools (значок «flex» у элемента) — он покажет направление осей и подсветит gap. Если свойство «не работает» — первым делом проверьте, на каком элементе оно написано.

Навигация