Aprende Flexbox de manera divertida

La creación de un diseño requiere la aplicación de un lenguaje de estilo para que los elementos estén dispuestos armónicamente en las páginas. Cascading Style Sheets, CSS, es el mecanismo principal para aplicar estilos en proyectos creados en HTML o XML. Hay una infinidad de recursos que se pueden utilizar y, hoy, vamos a detallar uno de los más importantes para organizar elementos en la pantalla: el famoso Flexible Box Module o Flexbox.

Para hacer que el proceso de aprendizaje sea más divertido y ayudar a memorizar las reglas, creé un tutorial muy diferente sobre aplicaciones: ¡hablemos de Flexbox con gatitos!

Un breve resumen sobre layouts

Flexbox fue creado a partir de la versión 3 de CSS. Antes de esta actualización, los modelos aplicados, por lo general, eran normal flow, grids, floats, positioning y multiple column.

Normal flow → Se refiere a los elementos block, con los elementos dispuestos uno después de otro, e inline, con los elementos dispuestos uno al lado del otro.

Grid → Como su nombre dice en inglés, es un formato de red. Tiene líneas verticales y horizontales que llenan el documento y los elementos pueden ser insertados dentro de ellas.

Floats → Permite la inserción de imágenes dentro de una columna de texto, que se desplaza hacia un lado.

Positioning → Define la posición de un elemento dentro de la página. Por defecto, el valor es static, que acompaña el flujo normal de la página.

Multiple-column → Dispone el layout en diversas columnas.

Con la llegada de Flexbox, fue posible reconfigurar la forma de disponer los elementos con reglas más específicas y flexibles. Las propiedades flex-direction, flex-wrap, flex-flow, justify-content, align-items y align-content deben ser declaradas en el container, así como el elemento patrón y las tags order, flex-grow, flex-shrink y align-self.

¿Cómo funciona Flexbox?

Flexbox es un formato unidimensional que permite disponer elementos en la página de forma organizada y con recursos más sencillos que otros diseños. Además, brinda una mayor flexibilidad en el posicionamiento de elementos en la pantalla, lo que se traduce en más asertividad y agilidad en la construcción de páginas.

Para añadir Flexbox a tu projecto, es necesario definir la propiedad display: flex dentro de un selector, que puede ser llamado container. Este será el elemento padre y todos tus elementos hijos serán ítems flexibles.

Basicamente, el código quedaría así:

.container{

display: flex;

}

Flex-direction

La organización de los elementos se basa en ejes, siendo éstos el eje principal y el eje transversal, perpendicular al eje principal. Las propiedades que se pueden aplicar al eje principal son: row, row-reverse, column y column-reverse. Los valores deben ser declarados dentro de una propriedad llamada flex-direction.

El eje principal define la dirección de los elementos flexibles, que pueden estar en línea, usando la propiedad row o en columna con la propiedad column. El complemento reverse significa que los elementos quedarán dispuestos al contrario, pero siguiendo el mismo patrón.

La siguiente ilustración ayudará a comprender mejor esa organización:

Vamos a verlas por separado:

• flex-direction: row

Con este valor, el eje principal de los elementos flexibles será movido inline, es decir, en la dirección de la línea. La adición del elemento reverse altera el orden de esa dirección.

• flex-direction: column

En este valor, el eje principal se moverá por toda la página, de arriba abajo, en la dirección block. Reverse funciona igual que en el concepto anterior.

Detalle importante: por defecto, al insertar el tag display: flex, la dirección definida es row.

• flex-wrap

Con esta propiedad, podemos definir si el texto creado tendrá o no quiebre de línea y cómo se comportará. Flex-wrap puede recibir tres valores: wrap, wrap-reverse y nowrap.

• flex-wrap: wrap

Genera el quiebre automático de las líneas cuando ésta alcanza el límite en el largo del container.

• flex-wrap: wrap-reverse

También genera el quiebre automático de líneas, pero en sentido contrario.

• flex-wrap: no-wrap

No genera quiebre de línea, sino que los elementos se “encogen” para ajustarse a los límites definidos en el container.

Justify-content

Es una propiedad que alinea los elementos de un container con base en el eje principal. Las posiciones posibles son flex-start, flex-end, center, space-between, space-around y space-evenly.

• justify-content: flex-start

Los elementos flexibles son alineados al inicio del eje principal.

• justify-content: flex-end

Los elementos flexibles son alineados al final del eje principal.

• justify-content: center

Los elementos flexibles son alineados al centro del eje principal.

• justify-content: space-between

Hay un espacio de igual tamaño entre los elementos flexibles, con el primer elemento al principio del eje principal y el último elemento al final.

• justify-content: space-around

Los artículos flexibles se distribuyen con espacios iguales en la línea, pero el espacio antes del primer artículo y después del último es la mitad del espacio de los artículos adyacentes.

• justify-content: space-evenly

Todos los espacios entre elementos son iguales, incluidos los espacios antes del primer elemento y después del último elemento.

align-content

La propiedad align-content dispone las líneas a lo largo del eje transversal del container y solo tendrá efecto si el elemento tuviera más de una línea y el tag flex-wrap: wrap estuviera activado. Los valores posibles son flex-start, flex-end, stretch, space-between y space around.

• align-content: flex-start

Las líneas son dispuestas a partir del inicio del eje transversal.

• align-content: flex-end

Las líneas son dispuestas a partir del final del eje transversal.

• align-content: center

Las líneas son dispuestas al centro del eje transversal.

• align-content: stretch

Las líneas ocupan todo el espacio disponible a lo largo de todo el eje transversal.

• align-content: space-between

Las líneas son dispuestas de manera uniforme, pero la primera línea queda al inicio del eje transversal, mientras que la última queda al final.

• align-content: space-around

Las líneas son igualmente dispuestas de manera uniforme. Sin embargo, también hay espacios antes de la primera línea y después de la última línea.

Align-items

Funciona de forma semejante a justify-content, pero establece que los elementos flexibles se encuentren a lo largo del eje transversal en lugar del eje principal, como justify content. Los valores posibles son stretch, flex-end, flex-start, center y baseline.

• align-items: stretch

Define el posicionamiento del ítem dentro del bloque en el cual está insertado, controlando la alineación en el eje transversal.

• align-items: center

Los ítems flexibles son centralizados en el eje transversal.

• align-items: baseline

Los ítems son alineados según sus líneas de base.

• align-items: flex-end

Los elementos son posicionados al inicio del eje transversal.

• align-items: flex-start

Los elementos son posicionados al final del eje transversal.

Order

Define el orden del posicionamiento de los elementos dentro del container.

Flex-shrink

Define la proporción con la que se desea reducir el tamaño del elemento flexible y posee el valor patrón cero (0) (el elemento no debe disminuir), aceptando únicamente valores positivos.

Flex-grow

Define la proporción en la que crecerán los elementos. El valor patrón es 0 (el elemento no debe crecer) y también acepta apenas valores positivos.

Flex-basis

Define el largo y el alto inicial del elemento flexible. El campo acepta valores en pixels y el patrón definido es auto.

Align-self

Define el posicionamiento del elemento flexible en el elemento padre, sobrescribiendo el valor definido individualmente en la propiedad align-items. Los valores que pueden ser definidos en este tag son auto, flex-start, flex-end, stretch, center y baseline.

• align-self: auto

Es el valor definido inicialmente y por defecto, que hereda las configuraciones del align-items aplicado al elemento padre.

• align-self: baseline

El ítem se alinea con la línea de base de tu texto.

• align-self: center

Centraliza el ítem flexible dentro del container.

• align-self: flex-start

También conocido como self-start y posiciona el elemento al inicio del eje transversal.

• align-self: flex-end

Denominada igualmente como self-end. Posiciona el elemento al final del eje transversal.

• align-self: stretch

Permite estirar el elemento para rellenar el área del container.

¿Cómo aprender y aplicar Flexbox jugando?

Mientras cubrimos el contenido de una manera divertida, necesitamos hablar sobre cómo puedes practicar mucho con los juegos. Hay algunos juegos en línea que ayudan a aprender y corregir contenido sobre Flexbox. Echa un vistazo a algunos de ellos:

Flexbox Froggy

En este juego, usarás tu conocimiento para colocar la rana en los lugares correctos de acuerdo con las pautas que aparecen en la pantalla. Puedes consultar más detalles y también iniciar una partida aquí.

Flexbox Zombies

¿Alguna vez has pensado en atacar zombies controlando tus armas con Flexbox? Parece imposible, ¿verdad? Pero el juego Flexbox Zombies desarrolló esta forma divertida y diferente de aprender sobre el modelo. Accede aquí.

Flexbox Defense

Seguro ya conoces esos juegos en los que necesitas defender tu reino colocando armas, guardias y barricadas. En este juego, alinearás los cañones usando Flexbox para proteger tu territorio de las amenazas enemigas. Suena bien, ¿no? Accede aquí.

¡Descárgalos cuando quieras!

En este artículo, abordamos una forma muy diferente de explicar Flexbox, una herramienta muy importante en el desarrollo de layouts. De manera divertida, compartí algunos de los conceptos aplicados en CSS y puedes descargar varios juegos que te ayudarán a poner en práctica lo aprendido.

¡Éxito!