Для чего нужны Flex

Flexbox (Flexible Box Layout) — это CSS-модуль, упрощающий создание гибких и адаптивных макетов. Он позволяет управлять распределением пространства, выравниванием и порядком элементов внутри контейнера, даже если их размер неизвестен или динамичен.

Основные преимущества:

• Простое выравнивание по вертикали/горизонтали.
• Автоматическое распределение свободного места.
• Изменение порядка элементов без изменения HTML.
• Адаптивность без сложных расчетов.

Пример:

.container {
  display: flex;
  justify-content: space-between; /* Равномерное распределение */
  align-items: center; /* Вертикальное выравнивание */
}
.child {
  flex: 1; /* Гибкое растягивание */
}

Используется для:

• Навигационных панелей.
• Карточек товаров.
• Центрирования контента.
• Сложных адаптивных сеток.