Teoría: Propiedades de los elementos Flex. Flexibilidad

En la lección anterior, aprendimos cómo la propiedad flex-grow nos permite distribuir el espacio adicional dentro de un contenedor flexible. Ahora, vamos a conocer dos propiedades adicionales que nos ayudarán a controlar mejor el tamaño de los elementos flexibles: flex-basis y flex-shrink.

Definiendo el tamaño inicial

La propiedad flex-basis establece un tamaño base para un elemento antes de que se aplique la distribución flexible. Esto significa que le indicamos al navegador cuánto debería medir el elemento inicialmente, sin considerar el espacio disponible o el crecimiento de otros elementos dentro del contenedor.

Podrías pensar que se comporta igual que width o height, pero hay una diferencia clave: flex-basis solo funciona en un contenedor flexible y afecta al eje principal (horizontal si el contenedor usa flex-direction: row).

Ejemplo 1: Todos los elementos con el mismo flex-basis

Vamos a establecer los elementos con un flex-basis de 200px dentro de un contenedor de 600px de ancho:

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Como la suma de los flex-basis de los elementos es exactamente 600px, encajan perfectamente en el contenedor.

Ejemplo 2: Cuando los elementos no encajan en el contenedor

¿Qué pasaría si cambiamos el flex-basis del primer bloque a 400px?

👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen

Como los tres elementos ahora suman 800px pero el contenedor solo tiene 600px de ancho, el navegador reduce automáticamente los elementos para que encajen.

Controlando la reducción del tamaño

Cuando el espacio dentro del contenedor es menor que la suma de los tamaños de sus elementos, estos deben reducirse para encajar. Aquí es donde entra en juego la propiedad flex-shrink.

Por defecto, todos los elementos tienen flex-shrink: 1, lo que significa que se encogen proporcionalmente. Veamos cómo se calcula la reducción de cada elemento cuando el espacio no es suficiente.

Ejemplo de reducción automática

Tomemos el caso anterior, donde los tres elementos sumaban 800px en total, pero el contenedor solo tenía 600px. Queremos calcular cuánto disminuirá cada elemento:

1️⃣ Calculamos el ancho negativo, es decir, la cantidad de espacio que falta:

• Tamaño del contenedor (600px) - Tamaño total de los elementos (800px) = -200px

2️⃣ Calculamos el peso total, usando la fórmula:

Para nuestro ejemplo:

3️⃣ Calculamos cuánto se reducirá cada elemento:

• Primer bloque: (-200 * 1) * (400 / 800) = -100px
• Segundo y tercer bloque: (-200 * 1) * (200 / 800) = -50px

Esto significa que después de la reducción:

Si queremos evitar que un elemento se reduzca, podemos usar flex-shrink: 0 en ese elemento.

Atajo

En lugar de escribir individualmente flex-grow, flex-shrink y flex-basis, podemos combinarlas en una sola propiedad:

.elemento {
  flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 200px */
}