Flexbox es un sistema de disposición de elementos en CSS que nos permite crear diseños complejos de una manera fácil y cómoda. Una parte importante dentro de este sistema es la alineación de los elementos dentro de su contenedor, la cual podemos definir usando propiedades como justify-content, align-items y align-content. Estas propiedades nos ayudan a mover todos los elementos hacia el borde de nuestra preferencia. Pero, ¿qué pasa cuando queremos hacer que un elemento destaque y se salga de la alineación? En este post te explicamos cómo usar la propiedad align-self de Flexbox para cambiar la alineación de tus elementos de manera individual.
¿Cómo funciona la propiedad align-self de Flexbox?
La propiedad align-self de Flexbox nos permite sobrescribir la alineación de un elemento dentro de un contenedor flex, sea la alineación por defecto del navegador o la alineación especificada para los elementos en la propiedad align-items. Esto quiere decir que podemos ignorar la alineación determinada de un elemento en concreto para alinearlo de otra manera dentro del contenedor.
Las opciones que tenemos en la propiedad align-self de Flexbox son las mismas de align-items. Al igual que en esa propiedad, los elementos que tengan align-self se alinearán teniendo como referencia el eje principal definido en la propiedad flex-direction. Recuerda que flex-direction puede ordenar los elementos HTML de un contenedor flex de cuatro maneras: row los ordena de izquierda a derecha, column de arriba abajo, row-reverse los ordena de derecha a izquierda y column-reverse los ordena de abajo arriba.
A continuación te presentamos cuáles son las opciones de la propiedad align-self de Flexbox:
- auto: esta opción mantiene la alineación actual del elemento.
- flex-start: esta opción alinea al elemento hacia el borde inicial del eje principal.
- flex-end: esta opción alinea al elemento hacia el borde final del eje principal.
- center: como su nombre indica, esta opción centra el elemento en el eje principal.
- baseline: alinea al elemento con la línea base de su contenido.
- stretch: esta opción hace que el elemento se estire para ocupar el espacio completo del contenedor en el eje principal. Si es horizontal, estira su ancho; si es vertical, estira su largo.
¿Quieres aprender más de Flexbox?
La propiedad align-self de Flexbox y su utilidad nos demuestra que Flexbox es un sistema que vale la pena conocer. Lo bueno de este sistema de disposición de elementos es que es muy amigable con el programador. No necesitamos conocerlo en profundidad para entender sus propiedades y basta con un pequeño diagrama para entender lo que hacen. Por ello, te recomendamos que mientras estés conociendo Flexbox uses esta cheatsheet de Darek Kay, que nos recuerda fácilmente las funciones de cada propiedad en Flexbox. Y si necesitas profundizar en alguna de las propiedades, siempre puedes acceder a nuestro nuestro blog para leer los artículos de la sección de desarrollo web.
Después de leer este post sabes exactamente cómo funciona la propiedad align-self de Flexbox y cómo utilizarla en una página web. ¡El siguiente paso para volverte un experto en Flexbox es ponerlo en práctica! ¿Y qué mejor lugar para hacerlo que en un bootcamp intensivo con la mezcla perfecta de teoría y práctica acompañado, además, de profesores expertos en el sector?
Para ayudarte durante tu proceso de aprendizaje, en KeepCoding tenemos el bootcamp perfecto para ti. En Desarrollo Web Full Stack Bootcamp continuarás aprendiendo, entre muchas otras cosas, acerca de las posibilidades de diseño de CSS y, en pocos meses, serás todo un experto. Además, en el transcurso del curso, crearás y diseñarás tu propia página web con los conocimientos adquiridos. ¡No lo dudes y matricúlate ya!
