Ya hemos visto qué es Flexbox. Ahora tenemos que ver las propiedades de alineación, que son reglas para distribuir y alinear elementos hijos dentro de un contenedor flexible.
Estas propiedades nos permiten crear diseños fluidos y adaptables sin tener que hacer cálculos matemáticos manuales, delegando todo el trabajo pesado de posicionamiento al motor del navegador.
Como vimos en la entrada anterior, display: flex es la regla que transforma una caja normal en un contenedor elástico.
Sin ella, ninguna de las demás propiedades que vamos a ver a continuación tendrá el más mínimo efecto. Es el botón de encendido que habilita todo el motor de Flexbox para los elementos que vivan directamente dentro de esa caja.
Alineación en el eje principal (justify-content)
La propiedad justify-content se encarga de distribuir a los hijos a lo largo del eje principal (que, si no lo habéis cambiado, es la línea horizontal de izquierda a derecha).
.menu-navegacion {
display: flex;
justify-content: space-between; /* Ideal para separar el logo a la izquierda y los enlaces a la derecha */
}
Es la herramienta perfecta para decidir qué hacemos con el espacio sobrante que queda en la fila. Sus valores más utilizados son:
| Valor | Descripción |
|---|---|
flex-start | Es el comportamiento por defecto. Empuja a todos los elementos hacia el inicio de la línea (la izquierda). |
flex-end | Los empuja a todos hacia el final de la línea (la derecha). |
center | Agrupa todos los elementos en el centro absoluto del contenedor. |
space-between | Pega el primer elemento al inicio, el último al final, y reparte el espacio sobrante a partes iguales entre los del medio. |
space-around | Parecido al anterior, pero añade un poco de espacio también en los extremos. |
Alineación en el eje cruzado (align-items)
Por otro lado, la propiedad align-items controla cómo se comportan los elementos en el eje perpendicular (normalmente, el vertical).
Si tenéis una fila de cajas y unas son más altas que otras, esta propiedad dicta cómo deben alinearse verticalmente entre ellas.
| Valor | Descripción |
|---|---|
stretch | Es el valor por defecto. Si no le habéis dado una altura fija a los hijos, se estirarán automáticamente para ocupar toda la altura de su padre. |
flex-start | Los alinea todos apoyados en el “techo” del contenedor. |
flex-end | Los alinea todos apoyados en el “suelo” del contenedor. |
center | Los centra verticalmente, ignorando si rozan arriba o abajo. |
Combinando justify-content: center y align-items: center en un contenedor que ocupe toda la pantalla, conseguiréis el ansiado centrado perfecto horizontal y vertical que tanto hizo sufrir a las generaciones pasadas de programadores.
Controlando el desbordamiento (flex-wrap)
¿Qué pasa si intentamos meter 10 cajas de 200 píxeles de ancho en una pantalla de móvil que solo mide 400 píxeles?
Por defecto, Flexbox es muy cabezota. Intentará mantener a todos los hijos en una sola línea pase lo que pase, aplastándolos y reduciendo su tamaño hasta que quepan (o desbordando la pantalla de forma horrible).
Para evitar este desastre, usamos la propiedad flex-wrap.
.galeria-fotos {
display: flex;
flex-wrap: wrap; /* Le damos permiso para crear nuevas filas */
}
Al indicarle el valor wrap, le estamos diciendo al navegador: “Si ves que los elementos no caben con su tamaño original, mételos en una nueva línea debajo”. Es una propiedad muy importante para que vuestra web no se rompa en pantallas pequeñas.
El espaciado interior (gap)
Antiguamente, para separar dos elementos dentro de un Flexbox, teníamos que ponerles un margin y luego hacer cálculos raros para que el último elemento no empujara el borde del contenedor.
Afortunadamente, hoy en día contamos con la propiedad gap (hueco o brecha).
.contenedor-tarjetas {
display: flex;
gap: 20px; /* Separación perfecta y automática */
}
Esta propiedad añade un espacio vacío de 20 píxeles única y exclusivamente ENTRE los elementos hijos, ignorando los bordes exteriores (es la forma moderna, limpia y recomendada de separar cosas).
Propiedades en los hijos: flex
Hasta ahora hemos dado órdenes al contenedor padre. Pero los hijos también pueden tener algo que decir. La propiedad abreviada flex controla cómo crece o se encoge cada elemento dentro del espacio disponible.
.tarjeta {
flex: 1;
}
Con flex: 1, todos los hijos intentan repartirse el espacio disponible de forma equilibrada.
.principal {
flex: 2;
}
.secundaria {
flex: 1;
}
En este caso, .principal pedirá aproximadamente el doble de espacio que .secundaria. No es una medida fija en píxeles, sino una proporción dentro del contenedor flexible.
Alinear un hijo concreto con align-self
A veces queremos que todos los hijos se alineen igual, excepto uno. Para eso existe align-self.
.contenedor {
display: flex;
align-items: center;
}
.boton-especial {
align-self: flex-end;
}
align-self sobrescribe el align-items del padre solo para ese elemento concreto. Es muy útil para pequeños ajustes sin desmontar toda la estructura.
