¿Cómo funcionan flex-grow, flex-shrink y flex-basis?

Question

Accepted Answer

Estas tres propiedades en **elementos flex** controlan cómo comparten espacio a lo largo del eje principal. La abreviatura `flex` las 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 propiedad explicada

- **`flex-basis`** — el tamaño ideal/inicial del elemento en el eje principal (como `width` para una fila). `auto` usa el tamaño del contenido.
- **`flex-grow`** — si hay espacio *extra*, qué tan ávidamente se expande este elemento. `0` = no crecer; números más altos crecen proporcionalmente.
- **`flex-shrink`** — si *no hay* espacio suficiente, qué tan dispuesto se encoge este elemento. `0` = nunca encogerse (puede causar desbordamiento); predeterminado `1` = encogerse según sea necesario.

## Crecimiento proporcional

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

El espacio extra se divide en la proporción de los valores de crecimiento, no en tamaños absolutos.

## Valores de abreviatura comunes

```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` en cada elemento crea columnas iguales; `flex: 0 0 250px` crea un panel rígido de ancho fijo junto a uno flexible.

## Un diseño real: barra lateral fija + contenido fluido

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

## Por qué es importante

Estas propiedades son cómo controlas el tamaño proporcional en diseños flex — columnas iguales (`flex: 1`), paneles fijos más fluidos (`flex: 0 0 X` + `flex: 1`) y prevención de encogimiento no deseado (`flex-shrink: 0`).

Comprender basis/grow/shrink convierte Flexbox de "los elementos simplemente están ahí" en control preciso y responsivo.