En este noveno artículo te voy a mostrar como puedes aplicar una alineación específica e individual a cualquier grupo o elemento de un contenedor Flexbox.
Tabla de contenidos
Preparando el terreno
Esta propiedad alinea los elementos hijo, reemplazando el valor más genérico align-items, propiedad que se aplica al contenedor padre.
Primero vamos a preparar nuestro layout para mostrar como se comporta esta propiedad.
Como siempre, primero el código HTML básico para preparar 4 elementos en un contenedor padre.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <title>Curso de Flexbox en raulbocache.com</title> <link rel="stylesheet" href="./css/styles.css" type="text/css"> </head> <body> <div class="caja-padre"> <div class="caja-hijo">1</div> <div class="caja-hijo">2</div> <div class="caja-hijo">3</div> <div class="caja-hijo">4</div> </div> </body> </html>
Y ahora el código CSS, para mostrar un layout centrado verticalmente.
/* Aplicamos fuente y comportamiento del modelo de caja */
* {
font-family: sans-serif;
box-sizing: border-box;
}
/* Color del fondo */
body {
background-color: #ddd;
}
/* Estilos del contenedor padre */
.caja-padre {
display: flex;
background-color: #fff;
height: 100vh;
justify-content: space-evenly;
align-items: center;
}
/* Estilos de los elementos hijo */
.caja-hijo {
padding: 30px;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fff;
border: 1px solid #fff;
flex: 0 0 calc(25% - 20px);
}
/* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
}
/* Estilo de los elementos hijo pares (even) */
.caja-hijo:nth-child(even) {
background-color: #5d77b3;
}Como puedes ver, hemos distribuido equitativamente (justify-content:space-evenly) los elementos horizontalmente. Y los hemos centrado verticalmente (align-items: center).
Además, cada uno de los items, tienen un tamaño horizontal del 25% con un margen automático de 20px cada uno (flex: 0 0 calc(25% - 20px); Tanto el factor de crecimiento, como decrecimiento, están desactivados.
El resultado visual es este:
La propiedad align-self
Partiendo de la situación anterior, imagínate que quieres que los elementos pares tengan una alineación diferente, por ejemplo que estén alineados en la parte superior de la ventana.
Con la propiedad align-items no puedes porque se alinearán todos, ya que controla los items en grupo, además se aplica al contenedor padre.
Para eso sirve la propiedad align-self, que aplicado a cualquier clase, sea grupal o individual, hace que puedas alinear independientemente elementos.
/* Estilo de los elementos hijo pares (even) */
.caja-hijo:nth-child(even) {
background-color: #5d77b3;
align-self: flex-start;
}Dando un valor a align-self de flex-start consiguirás alinear sólo los elementos pares al principio del eje vertical.
Si te apetece, puedes dar una alineación diferente a los elementos impares, por ejemplo, una alineación inferior.
//* Estilo de los elementos hijo impares (odd) */
.caja-hijo:nth-child(odd) {
background-color: #4061AE;
align-self: flex-end;
}
La propiedad align-items siempre aplica en el cross-axis, es decir el eje cruzado. Así que si lo que quieres es alinear los elementos en su eje horizontal, sólo tienes que cambiar la propiedad flex-direction a column, para que el cros-axis sea el horizontal.
Las mismas propiedades de los elementos pares e impares de arriba, pero aplicado al eje horizontal quedaría así:
Como puedes ver, los elementos impares que tienen un align-selft: flex-end, se alinean al final del eje horizontal. Los elementos pares, con un align-self: flex-start, se alinean al principio del eje. Fíjate que siempre se aplica al cross-axis, que en este caso es el eje horizontal.
Alineando sólo un elemento
Finalmente, vamos a alinear sólo un elemento. Para eso debes dar una clase o ID al elemento que quieres individualizar. Por ejemplo:
//* Estilo de un elemento independiente */
#caja-unica {
align-self: flex-start;
}He dado un nombre de ID único y la he llamado caja-unica (original). En el código HTML quedaría así:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <title>Curso de Flexbox en raulbocache.com</title> <link rel="stylesheet" href="./css/styles.css" type="text/css"> </head> <body> <div class="caja-padre"> <div class="caja-hijo">1</div> <div id="caja-unica" class="caja-hijo">2</div> <div class="caja-hijo">3</div> <div class="caja-hijo">4</div> </div> </body> </html>
Como puedes ver es la caja número 2. Para simplificar, he vuelto al estado inicial, es decir, todas las cajas centradas, menos caja-unica. Visualmente queda así:
Y hasta aquí el artículo de hoy…
Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta