Si eres desarrollador web Front-End ya debes saber lo que es Flexbox, si quieres llegar a ser un desarrollador web tienes que aprender a manejarlo. En este artículo vamos a asumir que eres del segundo tipo, vamos a comenzar a explicar los fundamentos y funcionamiento de Flexbox en CSS.
Ten en cuenta que Flexbox no es una propiedad CSS, sino que es un conjunto de propiedades que crean toda una forma de trabajo que nos facilita el posicionamiento de objetos dentro de una página web. Flexbox es toda una forma de trabajo. Así que debes plantearse antes de comenzar el proyecto si vas a usar Flexbox o no. Bueno, no me adelanto, empecemos:
¿Qué es Flexbox?
Como ya sabemos, flexbox nos permite ubicar elementos dentro de una página web o cualquier forma de trabajo que involucre css. Por ejemplo, cuando trabajas con React Native para crear aplicaciones móviles también se utiliza Flexbox para alinear los elementos.
Vamos aprender a utilizarlo, pera esto tienes que tener claro dos conceptos importantes, el elemento contenedor o padre y el elemento item o hijo. También debes conocer los ejes, eje principal y eje transversal.
Lo primero que debes hacer para comenzar a implementar flexbox es modificar la propiedad «display» del elemento padre, debemos ubicarlo en «flex» en caso que queramos manejar el padre como un bloque o en «inline-flex» en caso de querer manejarlo en línea.
A continuación pondremos un ejemplo en el que tenemos dos pestañas, la HTML y la CSS. En el HTML tenemos un div con una clase a la que pondremos el display en flex para convertirlo en el flex padre. Todos los div que hay en su interior serán flex item.
Vamos a explorar algunas propiedades que son muy útiles cuando usamos Flexbox, y que son aplicables al elemento padre para alinear a los elemento hijos o items: FLEX-DIRECTION, FLEX-DIRECTION, FLEX-FLOW, JUSTIFY CONTENT, ALIGN-ITEMS, entre otras. Vamos a ver para qué funciona cada una.
Flex Direction
flex-direction: row; alinea horizontalmente los elementos de izquierda a la dereha, es decir que los coloca uno al lado del otro.
flex-direction: row-reverse; alinea horizontalmente los elementos de la derecha a la izquierda, es decir, uno al lado del otro pero poniendo el ultimo primero.
flex-direction: column; alinea verticalmente los elementos de arriba hacia abajo. Es decir que cada elemento hijo ocupa una fila nueva.
flex-direction: column-reverse; alinea verticalmente los elementos de abajo hacia arriba, cada item en una nueva fila pero lo último primero.
FLEX-WRAP
Si no especificas esta propiedad no verás ningún efecto. Pero si lo haces verás la alineación en diferentes líneas solo en el caso de que no quepan en la primero línea. Por ejemplo, si tienes 10 hijos y cada hijo ocupa la mitad de la pantalla, solo verás 2 elementos en cada fila.
flex-wrap: wrap La propiedad de envoltura flexible especifica si las posiciones flexibles deben deslizar o no.
flex-wrap: wrap-reverse; deslizan en orden inverso
Si no lo haces los elementos van a dejar de verse y van a estar sobrepuestos en el espacio del padre. Dependiendo del objetivo de tu proyecto puede interesarte no permitir que los elementos bajen a otra línea. Por ejemplo en el caso de que quieras hacer un slider de elementos.
JUSTIFY CONTENT
Esta propiedad es usada para alinear los elementos en el eje principal del elemento padre. Es eje va a depender de la propiedad flex-direction. Dependiendo la dirección y el tamaño del elemento padre, lo items hijos se alinearán en su eje principal.
justify-content: center ; centra los elementos en el contenedor
justify-content: flex-start; Alinea los elementos al principio del contenedor. Es la propriedad tomada por defecto.
justify-content: flex-end; Alinea los elementos al final del contenedor. Es de Default.
justify-content: space-around; muestra los elementos flexibles con espacio antes, entre y después de las líneas
justify-content: space-between; espacio-entre muestra las posiciones flexibles con espacio entre las líneas.
ALIGN-ITEMS
Hace lo mismo que la propiedad anterior, pero en el eje transversal. Igual que la propiedad anterior, depende de la dirección y tamaño del elemento padre. Tiene las siguientes opciones:
align-items: center; centra los elementos a lo largo del eje.
align-items: flex-start alinea en vertical los elementos flexibles en la parte superior del contenedor osea posiciona los elementos desde el inicio del contenedor, es decir, a lo largo del eje transversal.
align-items: flex-end alinea los divs flexibles en la parte inferior del contenedor a lo largo del eje transversal.
align-items: stretch: estira los elementos flexibles para llenar el contenedor (esto es valor predeterminado).
align-items: baseline. Alinea en vertical las líneas «base» de los elementos a lo largo del eje transversal de su contenedor. Para poder comprender este ejemplo, vamos a añadir algunos estilos diferentes a los elementos. Para que se note la diferencia, aumentamos el tamaño de la fuente delprimer elemento.
ALIGN CONTENT
Gestiona cómo se alinean los elementos dentro del contenedor, con múltiples líneas. La diferencia con align-items es que el primero alinea elementos, y align-content las filas cuando hay espacio extra en el eje transversal. Además, align-self, alinea los elementos de forma independiente.
align-content: space-around; distribuye las líneas a lo largo del eje transversal, igualmente espaciados;
align-content: stretch; estira las líneas para que ocupen el eje transversal completo.
align-content:center ; Los alinea en el centro del eje.
align-content: flex-start; alinea los elementos a lo largo del inicio del eje transversal.
align-content: flex-end; alinea los elementos a lo largo del extremo del eje transversal.
align-content: between; Distribuye las líneas a lo largo del eje transversal, de principio a fin.
Eso es todo por hoy, espero que les hay gustado y sobre todo que les haya servido. Si tienes alguna duda puedes dejarlo en los comentarios y con todo gusto les ayudaré. Nos leemos en la siguiente ocasión.
Fuente: ma-no