Flexbox

До Flexbox простые вещи давались вёрстке тяжело: поставить блоки в ряд одинаковой высоты, прижать кнопку к низу карточки, отцентрировать что-то по вертикали. Это решали плавающими блоками, таблицами и хаками вроде clearfix. Flexbox сделал такие задачи делом пары строк, и сейчас он работает во всех браузерах.

Включается модель свойством display: flex на контейнере. Его прямые потомки становятся flex-элементами и подчиняются правилам контейнера.

Оси и основные свойства

• Главная ось задаётся flex-direction: строка (row, по умолчанию) или столбец (column).
• justify-content распределяет элементы вдоль главной оси: к началу, по центру, с равными промежутками.
• align-items выравнивает по поперечной оси. align-items: center решает вечную задачу вертикального выравнивания.
• flex-wrap: wrap разрешает перенос на новую строку.
• gap задаёт промежутки между элементами.
• flex у элемента — сокращение для роста, сжатия и базового размера.

Пример: шапка сайта

.header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header__search {
  flex: 1;
  min-width: 0;
}
.header__phone {
  margin-left: auto;
}

Логотип, поиск, телефон и корзина выстраиваются в ряд и выравниваются по центру по высоте. Поле поиска забирает всё свободное место, а margin-left: auto отталкивает телефон и всё, что за ним, к правому краю.

Частые сюрпризы

• Элемент не сжимается. По умолчанию flex-элемент не становится уже своего содержимого. Длинное слово или ссылка распирают карточку и ломают ряд. Лечится min-width: 0 у элемента, как в примере.
• Свойство order путает порядок. Оно меняет только визуальную последовательность. Клавиатура и экранный диктор идут по коду, и фокус начинает прыгать.
• Сетка из flex. Карточки в последнем неполном ряду растягиваются шире остальных. Для раскладки по строкам и столбцам одновременно лучше подходит CSS Grid, а Flexbox оставить для рядов внутри компонентов.