Когда используется Flexbox

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

Основные сценарии:

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

Пример:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.item {
  flex: 1; /* Равномерное распределение */
}

Когда не использовать:

• Для сложных двумерных макетов (лучше Grid).
• Если нужна поддержка старых браузеров (IE < 10).