Что такое flex?

Flexbox (display: flex) — способ раскладки, при котором дочерние элементы выстраиваются вдоль одной оси и гибко делят между собой место.

Основные свойства контейнера

.nav {
  display: flex;
  flex-direction: row;         /* ось: строка или колонка */
  justify-content: space-between; /* по главной оси */
  align-items: center;         /* по поперечной */
  flex-wrap: wrap;             /* перенос строк */
  gap: 12px;
}

Свойства элементов

• flex-grow, flex-shrink, flex-basis (кратко — flex) — как элемент растёт, сжимается и какой у него базовый размер.
• align-self — своё выравнивание.
• order — визуальный порядок.

Где применяют

Навигация, тулбары, карточки, выравнивание иконки с текстом, центрирование. Для двумерных сеток чаще выбирают Grid.

Частая ошибка

Длинный текст растягивает flex-элемент и ломает раскладку — помогает min-width: 0.

Коротко для собеседования

Flexbox — одномерная раскладка: контейнер задаёт ось и выравнивание, элементы через flex делят свободное место.

Подробнее: MDN — Flexbox