Flexbox: разберитесь с осями

Две оси вместо «по горизонтали»

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

Поэтому инструкция «justify-content центрирует по горизонтали» работает только в некоторых условиях. Направление письма и выбранная ось тоже имеют значение.

Панель, которая выдержит длинную подпись

Пусть слева находится название раздела, а справа — действия. Разрешим перенос строк и дадим заголовку право сжиматься. Отступ margin-inline-end: auto займёт доступное свободное пространство после заголовка.

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.toolbar__title {
  min-width: 0;
  margin-inline-end: auto;
  overflow-wrap: anywhere;
}
.toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

Когда лучше выбрать Grid

Flexbox удобен для группы кнопок, строки поиска или содержимого карточки. Если нужно согласовать колонки сразу в нескольких строках, рассмотрите Grid. Перенесённые строки flex-контейнера распределяют место независимо, поэтому их границы колонок могут не совпадать.

Не используйте order только для того, чтобы исправить неудобный порядок HTML. Сначала проверьте, какой порядок нужен при чтении и работе с клавиатурой.