1. Introducción a Flexbox
Flexbox (Flexible Box Layout) es un modelo de diseño unidimensional pensado para distribuir espacio entre ítems en una interfaz y alinear capacidades poderosas.
Conceptos Clave
- Eje Principal (Main Axis): La dirección primaria donde se colocan los ítems (por defecto, horizontal).
- Eje Cruzado (Cross Axis): La dirección perpendicular al eje principal (por defecto, vertical).
- Contenedor Flex: El padre con
display: flex. - Ítems Flex: Los hijos directos del contenedor.
2. El Contenedor (Padre)
Estas propiedades se aplican al elemento que envuelve a los ítems.
display
Activa el contexto Flexbox.
.container {
display: flex; /* Se comporta como un bloque */
/* o */
display: inline-flex; /* Se comporta como un elemento en línea */
}flex-direction
Establece el eje principal. Define la dirección en la que se colocan los ítems.
row (Por defecto)
De izquierda a derecha (en idiomas LTR).
row-reverse
De derecha a izquierda.
column
De arriba a abajo.
column-reverse
De abajo a arriba.
flex-wrap
Por defecto, los ítems intentan encajar en una sola línea. Esta propiedad permite que "envuelvan" (salten) a la siguiente línea si no caben.
nowrap (Por defecto)
Intenta encajar todo en una línea.
¿Desborda o encoge?
Mucha gente piensa que nowrap causa desbordamiento. En realidad, por defecto causa
encogimiento porque flex-shrink es 1. Solo desborda si impedimos
que encoja.
1. Lo que ocurre realmente (Shrink: 1): Todo encaja.
2 ítems de 150px en contenedor de 250px. Ambos encogen a 125px.
2. Si forzamos NO encoger (Shrink: 0): Desbordamiento Real.
El contenedor acaba en la línea negra. El Item 2 se sale.
wrap
Los ítems saltan a la siguiente línea si es necesario.
justify-content
Define la alineación a lo largo del Eje Principal. Ayuda a distribuir el espacio libre sobrante.
flex-start / flex-end / center
space-between
El primero al inicio, el último al final. Espacio igual entre ellos.
space-around
Espacio igual a cada lado del ítem. Nota: El espacio entre ítems es doble que el de los bordes.
space-evenly
Distribuye el espacio de manera totalmente uniforme, incluyendo los bordes.
align-items
Define el comportamiento por defecto de cómo se distribuyen los ítems a lo largo del Eje Cruzado (perpendicular).
align-content
Controla el espacio entre las filas (líneas).
Imagina que agitas una caja con varias filas de bloques. align-content decide si esas filas
se pegan todas arriba, si se centran como un bloque único, o si se separan entre ellas.
align-items: Mueve los ítems DENTRO de su línea.align-content: Mueve las LÍNEAS enteras dentro del contenedor.
Solo funciona con multimilínea (`flex-wrap: wrap`) y cuando sobra altura.
flex-start
Las filas se pegan arriba (pack). Sobra mucho espacio abajo.
center
Las filas se pegan en el centro. Sobra espacio arriba y abajo.
space-between
Fila 1 al techo, Fila 2 al suelo. El espacio sobra en medio.
stretch (Defecto)
Las filas crecen para ocupar todo el espacio disponible.
gap MODERNO
¡La propiedad que todos esperábamos! Crea un espacio físico entre filas y columnas, sin usar márgenes.
.container {
display: flex;
gap: 20px; /* Aplica a filas y columnas */
/* gap: 10px 20px; /* fila | columna */
}3. Los Ítems (Hijos)
Propiedades para controlar elementos individuales.
flex-grow
Define la capacidad de un ítem para crecer si hay espacio sobrante.
📈 La Fórmula del Crecimiento
Fórmula: (Grow del ítem / Suma total de Grows) * Espacio Sobrante = Crecimiento
Ejemplo: Contenedor 500px, 4 ítems de 100px. Sobran 100px.
- Si todos tienen
flex-grow: 1: 100px / 4 = 25px para cada uno. - Si uno tiene
flex-grow: 2y el resto 1:- Suma de grows: 1 + 1 + 1 + 2 = 5 partes.
- Valor de cada parte: 100px / 5 = 20px.
- Ítem grow 2 recibe: 2 * 20px = 40px.
flex-shrink
Define la capacidad de encogerse si falta espacio (overflow). 1 por defecto. Ponlo a
0
para evitar que un elemento se aplaste.
📉 La Fórmula del Encogimiento (Importante)
A diferencia de grow, flex-shrink tiene en cuenta el tamaño del elemento. Un elemento más grande encogerá más píxeles para mantener la proporción.
Fórmula: (Shrink del ítem * Ancho Base / Suma Ponderada Total) * Espacio Negativo = Encogimiento
Ejemplo Práctico:
Contenedor de 500px con 4 ítems de 200px (Total 800px). Faltan 300px (Espacio Negativo).
Ítem 4 tiene shrink: 3, el resto shrink: 1.
- Calcular Suma Ponderada Total: (Ancho * Shrink) de todos.
(200*1) + (200*1) + (200*1) + (200*3) = 600 + 600 = 1200. - Calcular cuánto encoge cada uno:
Ítems normales (shrink 1): (200 * 1 / 1200) * 300px = 50px.
Ítem especial (shrink 3): (200 * 3 / 1200) * 300px = 150px.
Resultado: Los ítems normales miden 150px, el especial se queda en 50px.
(150px)
(150px)
(150px)
(50px)
flex-basis
Establece el tamaño inicial del ítem antes de distribuir el espacio. Es como
width pero más poderoso en Flexbox.
Se recomienda usar siempre la propiedad resumida:
flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0% */
flex: auto; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto */
flex: initial; /* flex-grow: 0; flex-shrink: 1; flex-basis: auto (Defecto) */
flex: none; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto */align-self
Permite a un ítem individual romper la regla de alineación del padre.
order
Cambia el orden visual sin cambiar el HTML. Cuidado con la accesibilidad (el lector de pantalla sigue el DOM).
4. Trucos Maestros y Patrones
El Truco de margin: auto
En Flexbox, los márgenes automáticos se "comen" todo el espacio libre disponible. Esto es increíblemente útil para separar grupos de ítems.
.login-btn {
margin-left: auto; /* Empuja todo lo anterior a la izquierda y a sí mismo a la derecha */
}Centrado Absoluto Perfecto
.padre {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Sticky Footer (Pie de página pegajoso)
Si tienes poco contenido, el footer sube. Con Flexbox, puedes forzarlo abajo.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* Ocupa todo el espacio sobrante, empujando el footer */
}