Como funcionam flex-grow, flex-shrink e flex-basis?

Question

Accepted Answer

Essas três propriedades em **flex items** controlam como compartilham espaço ao longo do eixo principal. A abreviação `flex` as combina.

```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 */
```

## Cada propriedade explicada

- **`flex-basis`** — o tamanho ideal/inicial do item ao longo do eixo principal (como `width` para uma linha). `auto` usa o tamanho do conteúdo.
- **`flex-grow`** — se há espaço *extra*, o quanto este item se expande gananciosamente. `0` = não crescer; números maiores crescem proporcionalmente.
- **`flex-shrink`** — se há espaço *insuficiente*, o quanto este item encolhe prontamente. `0` = nunca encolher (pode causar estouro); padrão `1` = encolher conforme necessário.

## Crescimento proporcional

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

O espaço extra é dividido na proporção dos valores de crescimento, não tamanhos absolutos.

## Valores de abreviação comuns

```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` em cada item torna as colunas iguais; `flex: 0 0 250px` torna um painel rígido de largura fixa ao lado de um flexível.

## Um layout real: barra lateral fixa + conteúdo fluido

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

## Por que isso importa

Essas propriedades são como você controla dimensionamento proporcional em layouts flex — colunas iguais (`flex: 1`), painéis fixos-mais-fluidos (`flex: 0 0 X` + `flex: 1`), e evitar encolhimento indesejado (`flex-shrink: 0`).

Compreender basis/grow/shrink transforma Flexbox de "itens apenas sentam aqui" em controle preciso e responsivo.