Когда использовать flex

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

1. Гибкое распределение пространства
   Например, если нужно растянуть один элемент, а остальные оставить фиксированными:
   css

   Копировать

   .container {
     display: flex;
   }
   .main {
     flex-grow: 1; /* Занимает всё свободное место */
   }

2. Выравнивание элементов
   Простое центрирование по вертикали/горизонтали:

   css

   Копировать

   .center {
     display: flex;
     justify-content: center;
     align-items: center;
   }

3. Реверсивные или переносимые контейнеры
   Например, мобильная адаптация без изменения HTML:

   css

   Копировать

   @media (max-width: 768px) {
     .container {
       flex-direction: column;
     }
   }

Когда НЕ использовать flex:

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

Flex интуитивно понятен для простых раскладок, но для сложных структур комбинируй его с Grid.