flex-grow: dice cuántas partes del
sobrante le tocan, y el tamaño de cada parte depende de lo que hayan
pedido las demás. Es el equivalente a fr de Grid.
Con flex-grow: 1 en todas, el espacio libre se
reparte a partes iguales.flex-shrink: dice con qué disposición
cede esta caja cuando falta sitio. Su valor por defecto es
1, así que todas ceden aunque no se escriba nada.
El recorte se reparte en proporción al tamaño de cada caja: la más
grande cede más, aunque todas tengan el mismo valor.En los dos casos el número no es una cantidad en píxeles: es un peso dentro de un reparto.
flex-grow: sobra espacioTres cajas de 200, 400 y 100 px suman 700. En una ventana de 900 px sobran 200 px, y eso es lo que se reparte.
Caso A — las tres con flex-grow: 1
Suma de pesos: 1+1+1 = 3. Cada parte: 200 ÷ 3 = 66,7 px.
| Tamaño de partida | Recibe | Tamaño final |
|---|---|---|
| 200 px | 66,7 | 266,7 px |
| 400 px | 66,7 | 466,7 px |
| 100 px | 66,7 | 166,7 px |
Reciben lo mismo, pero no acaban iguales: cada una parte de su propio tamaño.
Caso B — pesos 1, 1 y 2
Suma de pesos: 1+1+2 = 4. Cada parte: 200 ÷ 4 = 50 px.
| Tamaño de partida | flex-grow |
Recibe | Tamaño final |
|---|---|---|---|
| 200 px | 1 | 50 | 250 px |
| 400 px | 1 | 50 | 450 px |
| 100 px | 2 | 100 | 200 px |
Caso C — solo crece la pequeña (pesos 0, 0 y 1)
Se lleva los 200 px enteros.
| Tamaño de partida | flex-grow |
Recibe | Tamaño final |
|---|---|---|---|
| 200 px | 0 | — | 200 px |
| 400 px | 0 | — | 400 px |
| 100 px | 1 | 200 | 300 px |
flex-shrink: falta espacioLas mismas tres cajas de 200, 400 y 100 px, que suman 700. En una ventana de 600 px faltan 100 px, y eso es lo que hay que recortar.
Caso A — las tres con flex-shrink: 1
Cada una cede en proporción a su tamaño, sobre un total de 700.
| Tamaño de partida | Cálculo | Cede | Tamaño final |
|---|---|---|---|
| 200 px | 100 × 200/700 | 28,6 | 171,4 px |
| 400 px | 100 × 400/700 | 57,1 | 342,9 px |
| 100 px | 100 × 100/700 | 14,3 | 85,7 px |
La de 400 cede el doble que la de 200 con el mismo valor. Nadie lo ha pedido: sale del propio cálculo, y es lo sensato, porque quitar 100 px a una caja grande se nota menos que quitárselos a una pequeña.
Caso B — la primera con flex-shrink: 0
Esa caja no cede. Los 100 px los reparten las otras dos, en proporción a 400 y 100.
| Tamaño de partida | flex-shrink |
Cede | Tamaño final |
|---|---|---|---|
| 200 px | 0 | — | 200 px |
| 400 px | 1 | 80 | 320 px |
| 100 px | 1 | 20 | 80 px |
Caso C — la pequeña con flex-shrink: 2
Ahora pesa 100 × 2 = 200 en el reparto, igual que la primera.
| Tamaño de partida | flex-shrink |
Peso | Cede | Tamaño final |
|---|---|---|---|---|
| 200 px | 1 | 200 | 25 | 175 px |
| 400 px | 1 | 400 | 50 | 350 px |
| 100 px | 2 | 200 | 25 | 75 px |
Es el caso que más se nota: la caja pequeña pierde la cuarta parte de su tamaño.