Урок 22. Ошибки: Введение во Flexbox

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

⚡ Кратко

Главные грабли: писать свойства контейнера на детях, забывать, что column меняет оси местами, и мешать margin с gap.

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

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

justify-content и align-items — свойства контейнера. Поставленные на дочерний блок, они ничего не делают.

❌ justify-content на детях — не центрирует

блок

✅ justify-content на контейнере

блок
/* ❌ неправильно */
.item { justify-content: center; }
/* ✅ правильно */
.container { display: flex; justify-content: center; }
Ошибка 2: забыть, что flex-direction: column меняет main axis и cross axis местами. После переключения на колонку justify-content начинает выравнивать по вертикали, а align-items — по горизонтали.
Ошибка 3: смешивать margin-хаки с gap. Это даёт двойные и непредсказуемые промежутки. Для расстояний между flex-элементами используйте gap.
Ошибка 4: ждать, что flex подействует на внуков. Flex-элементами становятся только прямые дети контейнера, а не вложенные глубже.
Диагностика: включите Flexbox overlay в DevTools, проверьте направление осей и убедитесь, что нужное свойство написано на контейнере.

Навигация