Guía completa de Flexbox

Thumbnail-Flexbox

Vamos a ver una guía completa de Flexbox, una propiedad muy interesante implementada en CSS3 y, hasta la fecha, implementada en la mayoría de los navegadores principales.

Preámbulo (conociendo Flexbox)

Cuando aprendemos a diseñar paginas web es muy importante saber la forma en la que vamos vamos a posicionar los elementos y/o secciones del sitio web.

Flexbox es un patrón de diseño en el que podremos predecir el comportamiento de la web cuando es visualizada en distintas resoluciones de pantalla (Viewports). Por tanto, estamos aprendiendo a desarrollar diseños completamente responsivos.

Consideraciones previas

Es necesario (e importantísimo) añadir que Google ya ha empezado a penalizar aquellas webs que no cumplen con los estándares responsivos.

Cuando hablamos de diseño responsive, estamos hablando de que en el año 2015, el uso de internet ha crecido su uso en más de un 60% en dispositivos móviles (Smartphones, tablets, dispositivos con resoluciones pequeñas…).

A la hora del desarrollo responsive, debemos aplicar dentro de la etiqueta head la siguiente etiqueta meta:

¿Qué significa esta etiqueta meta?

Las etiquetas meta se usan para añadir información relativa a la web, y serán utilizadas por los navegadores y buscadores.

Dentro de la etiqueta mencionada anteriormente vemos que tiene un atributo name que se refiere al viewport (tamaño de visualización en pantalla), otro atributo llamado content que nos está diciendo que el ancho de visualización se va a limitar al ancho del dispositivo en el que se está visualizando, que el escalado (o zoom) inicial y final será de 1 (No se podrá hacer zoon en la pantalla).

Para conocer más sobre esta etiqueta puedes ver el siguiente artículo Etiqueta ViewPort – DesarrolloWeb.com

Conocida esta etiqueta debemos también tener en cuenta que la mejor forma para desarrollar diseños responsivos es basarse en que, como he mencionado anteriormente, existe un crecimiento exponencial (o casi exponencial) de uso de dispositivos de pequeña resolución. Por tanto nos basaremos en un estándar cada vez más usado y recomendado, MOBILE FIRST.

Comencemos…

En esta guía aprenderás a usar flexbox de una manera fácil y práctica, con ejemplos explicativos alojados en CodePen (donde podrás consultar el código siempre que quieras).

Antes que nada debemos tener claros los conceptos de flexbox y sus componentes (sistemas de ejes, etc.), que les muestro en la siguiente imagen sacada de la guía del MDN (Mozilla Developer Network).

Flexbox - Sistema de ejes.

Una vez revisado y entendido, que en flexbox existe este sistema de ejes (o cómo quieras llamarlo), podemos pasar a explicar más a fondo todo esto, en un sentido más práctico.

Propiedades para los contenedores

Display

Algo que debemos tener bien claro es que, únicamente vamos a darle la propiedad display: flex, a aquellas cajas (div o etiquetas) que queramos que se comporten como contenedores flexibles. No es necesario declarar dicha propiedad a los elementos (items), si no van a ser usados como contenedores flexbox.

Les invito a que investiguen el código a sus anchas, para que vean por ustedes mismos el comportamiento.

Flex-direction

Propiedad que se aplica a los contenedores. Tiene 3 estados:

  • row. De izquierda a derecha. Por defecto.
  • row-reverse. De derecha a izquierda.
  • column. En columna de arriba a abajo.
  • column-reverse. En columna de abajo a arriba.

Flex-wrap

Esta propiedad nos indica si el contenido será contenido en una línea o si se distribuirá en varias líneas para ajustarse al tamaño del contenedor flexbox. Tiene 3 estados:

  • nowrap. el contenido se distribulle en una línea. Por defecto.
  • wrap. el contenido se distribulle en varias líneas.
  • wrap-reverse. el contenido se distribulle en varias líneas, pero de forma invertida.

Flex-flow

Se trata, simplemente de un shorthand que engloba, tanto el flex-direction, como el flex-wrap.

Justify-content

Alineación de los items con respecto al eje principal. Nos va a ayudar a distribuir los items, teniendo en cuenta los espacios libres que quedan entre estos. Tiene 5 estados:

  • flex-start. Alinea todos los items de este contenedor al principio -izquierda- del eje principal. Por defecto.
  • flex-end. Alinea todos los items del contenedor padre flexible al final -derecha- del eje principal
  • center. Los items son alineados al centro del contenedor padre.
  • space-betwen. En este estado, los item son alineados de tal forma que siempre haya espacio entre ellos. Si elegimos este valor, debemos tener en cuenta que los elementos que se encuentren en los extremos del eje principal -izquierda y derecha-, no mantendrán esta distancia entre los bordes del contenedor padre y éstos, puesto que esta propiedad afecta únicamente a los items, es decir, afectará únicamente al comportamiento que tienen los items entre si.
  • space-around. Como el ‘space-between’, también añade espaciado entre los items, pero esta vez de una forma ditinta. Lo que se crea es, un espacio alrededor de cada item.

Align-items

Alinea los items en el eje transversal -eje Y-. Podemos distinguir 5 valores distintos:

  • flex-start. Alineación de los items al principio del eje transversal -arriba-. Por defecto.
  • flex-end. Alineación de los items en el final del eje transversal -abajo-.
  • center. Los items son posicionados al centro del eje transversal.
  • stretch. Los tiems ocupan el tamaño total del height del contenedor padre.
  • baseline. Los items se alinean teniendo en cuenta las bases de las líneas de texto de cada uno de los items. El height no se ve alterado.

Align-content

Alinea las líneas -items distribuidos en el eje Y- de un contenedor flex. Parecido a la forma de alinear del justify-content -en el eje X-. Esta propiedad puede tomar 6 valores distintos:

  • flex-start. Items alineados al principio del eje tranversal -eje Y/cross axis-.
  • flex-end. Items alineados al final del eje transversal.
  • center. Los items se alinean al centro del eje transversal.
  • stretch.  Los items son distribuidos en distintas líneas teniendo en cuenta una separación después de éstas. Es un poco complicado de explicar y entender, así que lo mejor es que hagas pruebas por tu cuenta. Por defecto.
  • space-between. Cada fila de items es distribuida de tal forma que, entre ellas, siempre exista la misma separación.
  • space-around. Las filas de items son distribuidas teniendo en cuenta que, alrededor de cada uno de estos, habrá un espaciado fijo -relativo al espacio sobrante en el contendor flexible-.

Propiedades para los items

Order

Esta propiedad es aplicada a cada uno de los items. Proporciona la información necesaria para mostrar el orden de los distintos items dentro de un contenedor flexible. Los distintos valores que puede tomar son únicamente números enteros. Está permitido el uso de valores negativos.

Flex-grow

Se puede definir como una propiedad que nos ayuda a definir el espacio sobrante que va a ocupar cada uno de los items y cómo lo va a adquirir. Me explico, si a un item le decimos que su flex-grow es de 2 y a otro item le indicamos que su flex-grow es de 1, el que tiene flex-grow definido a 2 se hará el doble de grande con respecto al espacio libre que quedaría, y el que tiene el flex-grow a 1 lo hará de forma que solo ocupe un espacio del espacio libre. Esto lo vemos mejor con un ejemplo.

Flex-shrink

Es la habilidad que tiene un item para encogerse (contraerse), si es necesario. Vemos un ejemplo.

Flex-basis

Define el tamaño por defecto antes de que el espacio restante sea distribuido. Puede ser expresado en porcentaje (%), rem, etc. Esta propiedad es un poco liosa de entender. Veamos un ejemplo con una imagen de la w3.org

Explicación práctica Flex-basis

Flex

Se trata de un shorthand en el que se definen las siguientes propiedades:

  • flex-grow
  • flex-shrink
  • flex-basis

Cabe destacar que, tanto el segundo (flex-shrink) como el tercer parámetro (flex-basis) son opcionales. Vemos aquí un ejemplo de código.

Align-self

Proporciona información para el alineamiento por defecto de cada uno de los items. Aunque ya esté definida (para el contenedor) la propiedad align-items. Un ejemplo de código a continuación.

Como vemos, puede tomar 6 valores distintos. Estos distintos tipos de valores ya han sido explicados en puntos anteriores de la guía.

Ejemplo final con todo detalle.

See the Pen Ejemplo 2 Flexbox by apu314 (@apu314) on CodePen.