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

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

1. Распределять пространство между элементами, даже если их размер неизвестен.
2. Выравнивать элементы по вертикали/горизонтали без хаков.
3. Менять порядок элементов независимо от HTML.
4. Автоматически адаптировать элементы под доступное пространство.

Пример:

.container {
  display: flex;
  justify-content: space-between; /* равные промежутки */
  align-items: center; /* вертикальное выравнивание */
}
.item {
  flex: 1; /* растягивается пропорционально */
}

Основные преимущества: простота управления, отсутствие необходимости в float/clear, поддержка во всех современных браузерах.