Урок 23. Ошибки: Главная и поперечная оси

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

⚡ Кратко

Чаще всего ломается из-за путаницы осей: justify-content ≠ align-items, а при column они работают «наоборот». И помните: свойства выравнивания — на контейнере.

Ошибка 1. Свойства выравнивания пишут на flex-item

justify-content, align-items, flex-direction работают только на контейнере. На дочернем блоке они ничего не делают.

❌ justify-content на элементе — игнорируется

1
2
3

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

1
2
3
/* ❌ не там */
.item { justify-content: flex-end; }
/* ✅ на контейнере */
.bar  { display: flex; justify-content: flex-end; }

Ошибка 2. Забыли, что column меняет оси местами

При flex-direction: column главная ось — вертикальна. Поэтому justify-content: center центрирует по вертикали, а не по горизонтали. Чтобы центрировать по горизонтали в column — нужен align-items: center.

❌ ждали центр по горизонтали — а justify-content в column двигает по вертикали

1
2

✅ для центра по горизонтали в column — align-items

1
2
/* column: главная ось — вертикаль */
.bar {
  display: flex;
  flex-direction: column;
  align-items: center; /* центр по горизонтали */
}

Ошибка 3. Путают значения justify и align

Не существует align-items: space-between и justify-content: stretch (в обычном Flexbox). space-* — только у justify-content, а stretch/baseline — только у align-items. Браузер просто проигнорирует неверное значение.
Ошибка 4: смешивать margin-хаки с gap для промежутков — получаются непредсказуемые отступы. Для расстояний между flex-элементами используйте gap (см. урок 24).
Диагностика: включите Flexbox overlay в DevTools (значок flex рядом с элементом) — браузер подсветит направление главной и поперечной осей и покажет, на каком элементе висит display: flex.

Навигация