Как работает Flexbox?

Вопрос

Как работает модель Flexbox и когда её использовать?

Короткий ответ

Flexbox — это одномерная модель компоновки: элементы располагаются в одну строку или колонку и гибко распределяют доступное пространство.

Подробный ответ

Свойства контейнера (display: flex):

• flex-direction — row / column — ось расположения элементов.
• justify-content — выравнивание по главной оси (flex-start, center, space-between...).
• align-items — выравнивание по поперечной оси.
• flex-wrap — перенос элементов на новую строку.
• gap — отступы между элементами без "лишних" margin.

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

• flex-grow — насколько элемент растягивается относительно других.
• flex-shrink — насколько элемент сжимается при нехватке места.
• flex-basis — базовый размер до распределения свободного пространства.
• flex: 1 1 0 — частый шорткаст "занять всё доступное место поровну".

Flexbox идеален для одномерных раскладок: навигационных панелей, карточек в ряд, центрирования блока. Для двумерных сеток (строки + колонки одновременно) лучше подходит Grid.

Пример

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.grow {
  flex: 1; /* займёт всё оставшееся место */
}

Дополнительные вопросы

• Чем justify-content отличается от align-items?
• Что делает flex: 1 1 auto по сравнению с flex: 1 1 0?
• Когда выбрать Grid вместо Flexbox?