Propiedades de los elementos Flex. Flexibilidad — CSS: Fundamentos de Flex

• flex-basis: Definiendo el tamaño inicial
• flex-shrink: Controlando la reducción del tamaño
• flex: atajo

En la lección proporcionada, se han encontrado dos iframes de CodePen. Se han reemplazado por enlaces en el formato especificado, añadiendo una breve explicación antes del enlace. Aquí está la versión modificada:

flex-basis: Definiendo el tamaño inicial

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.

flex-shrink: 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:

   Peso total = (flex-shrink * tamaño_base) de cada elemento

Para nuestro ejemplo:

   1 * 400px + 1 * 200px + 1 * 200px = 800px

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.

flex: 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 */
}

Materiales adicionales

1. Webinar de Códica 🎬 Diseños flexibles con Flexbox