Как работают flex-grow, flex-shrink и flex-basis?

Question

Accepted Answer

Эти три свойства на **flex items** контролируют, как они делят пространство вдоль главной оси. Сокращение `flex` их объединяет.

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## Объяснение каждого свойства

- **`flex-basis`** — идеальный/начальный размер элемента вдоль главной оси (как `width` для строки). `auto` использует размер содержимого.
- **`flex-grow`** — если есть *дополнительное* пространство, как жадно расширяется этот элемент. `0` = не расти; большие цифры растут пропорционально.
- **`flex-shrink`** — если *недостаточно* пространства, как охотно сжимается этот элемент. `0` = никогда не сжимайся (может привести к переполнению); по умолчанию `1` = сжимайся по мере необходимости.

## Пропорциональный рост

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

Дополнительное пространство разделяется в соотношении значений роста, а не абсолютных размеров.

## Обычные значения сокращения

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` на каждом элементе создает равные столбцы; `flex: 0 0 250px` создает жесткую панель фиксированной ширины рядом с гибкой.

## Реальный макет: фиксированная боковая панель + жидкое содержимое

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## Почему это важно

Эти свойства — это то, как вы контролируете пропорциональный размер в flex-раскладках — равные столбцы (`flex: 1`), фиксированные плюс гибкие панели (`flex: 0 0 X` + `flex: 1`), и предотвращение нежелательного сжатия (`flex-shrink: 0`).

Понимание basis/grow/shrink превращает Flexbox из "элементы просто сидят здесь" в точное, чувствительное управление.