Справочник · CSS

flex-direction: ряд или колонка

Свойство задаёт главную ось флекса. От неё зависит, что делает justify-content.

Как это работает

row ставит элементы в строку, column — столбиком. row-reverse и column-reverse меняют порядок визуально, но не порядок в HTML и не порядок Tab. Поэтому reverse не используй, чтобы «поменять смысл» меню. Если ось стала колонкой, justify-content распределяет уже вертикально, а align-items — горизонтально.

.stack { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) {
  .stack { flex-direction: row; }
}

Когда использовать

Форма столбиком на телефоне и в ряд на широком экране. Кнопки в карточке чаще остаются колонкой или обычным рядом без reverse.

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

• После смены оси выравнивание уехало не туда.
• row-reverse переставил меню только визуально, клавиатура идёт по-старому.
• Забыли gap, и элементы слиплись.