Когда используют display flex

Flexbox используется для создания гибких макетов, где элементы могут динамически изменять размер и положение внутри контейнера. Основные сценарии:

1. Выравнивание элементов по горизонтали/вертикали
2. Распределение пространства между элементами
3. Создание адаптивных колонок без float
4. Управление порядком элементов

Пример:

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

Ключевые преимущества:

• Простое центрирование
• Автоматическое распределение пространства
• Контроль направления (row/column)
• Гибкое управление элементами

Flexbox особенно полезен для навигационных панелей, карточек товаров, форм и других компонентов, требующих точного позиционирования.