flex-direction: направление оси

flex-direction определяет направление главной оси flex-контейнера — то есть в каком направлении выстраиваются flex-элементы.

Зачем нужно

Одним свойством можно переключить раскладку из горизонтальной в вертикальную (или наоборот). Это основа адаптивных компонентов: на десктопе элементы в строку (row), на мобильном в колонку (column) — и все justify-content/align-items переориентируются автоматически.

Где используется

  • Мобильный навбар: переключение с row на column
  • Вертикальные списки: flex-direction: column
  • Обратный порядок элементов без изменения HTML

Значения

.container {
  display: flex;
  flex-direction: row;           /* по умолчанию — слева направо */
  flex-direction: row-reverse;   /* справа налево */
  flex-direction: column;        /* сверху вниз */
  flex-direction: column-reverse;/* снизу вверх */
}

Примеры

row — горизонтальная ось (по умолчанию)

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

<nav class="navbar">
  <a href="/">Лого</a>
  <a href="/about">О нас</a>
  <a href="/contact">Контакты</a>
</nav>

column — вертикальная ось

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card__footer {
  margin-top: auto; /* прижать вниз */
}

<div class="card">
  <img src="photo.jpg">
  <h2>Заголовок</h2>
  <p>Описание</p>
  <button class="card__footer">Купить</button>
</div>

Адаптивное переключение

.features {
  display: flex;
  flex-direction: column; /* мобильный — вертикально */
}

@media (min-width: 768px) {
  .features {
    flex-direction: row; /* планшет и выше — горизонтально */
  }
}

row-reverse — обратный порядок

.chat-message--own {
  display: flex;
  flex-direction: row-reverse; /* аватар справа, текст слева */
  gap: 8px;
}

Влияние на оси

При смене flex-direction меняются главная и поперечная оси, а вместе с ними меняется и то, что делают justify-content и align-items:

flex-direction justify-content align-items
row горизонталь вертикаль
column вертикаль горизонталь

Частые ошибки

  1. Забытая смена осей — при flex-direction: column justify-content: center центрирует по вертикали, а не горизонтали
  2. row-reverse не меняет justify-content: flex-start — flex-start при row-reverse означает правый край; нужно flex-end для "обычного" левого края
  3. column без явной высоты контейнера — при justify-content: center и высоте по контенту нет пространства для центрирования

Связанные темы

Ресурсы