Как работает CSS Flexbox?

Question

Accepted Answer

## Модель

Flex — одномерный layout: главная ось (`flex-direction`) и поперечная. Контейнер (`display: flex`) распределяет **flex items**.

## Ключевые свойства

Контейнер: `justify-content`, `align-items`, `flex-wrap`, `gap`.  
Элемент: `flex-grow`, `flex-shrink`, `flex-basis` (часто шорткат `flex`), `align-self`, `order`.

```css
.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.nav .grow { flex: 1 1 auto; }
```

Алгоритм: базис → свободное место растёт через grow → нехватка сжимает через shrink (с учётом min-content).

## Итог

Flex идеален для рядов/колонок UI-компонентов. Для двумерных сеток страницы чаще Grid; Flex — внутри компонентов.