En este artículo hablaremos sobre el funcionamiento de Flex Box o modelo «caja flexible». Además veremos de una manera super práctica los beneficios, la sencillez y el potencial que nos supone el trabajar con este modelo de caja flexible.

Existen dos tipos de elementos dentro de flex:

  • Elemento padre o contenedor (flex container): es el elemento que engloba a todos los elementos de su interior.
  • Elemento hijo o items (flex items): son los elementos que están englobados dentro del elemento padre.

En este artículo, además de ver el funcionamiento de Flex. Veremos algunas propiedades que aplicaremos directamente al contenedor padre para ver cómo reaccionan los elementos hijos.

Creando el elemento padre (display: flex)

Flex box trabaja mediante a un elemento contenedor que engloba al resto de etiquetas de un documento. Por ello, primeramente, creamos el elemento contenedor:

Y creamos un CSS en el que añadimos un background-color y la propiedad display con valor flex:

El resultante será:

Creando los elementos hijos (contenidos)

Una vez creado el elemento padre, vamos a crear los elementos hijos de este elemento contenedor «padre» (la caja flexible). Estos elementos hijos pueden ajustarse son flexibles (veremos que significa un poco más abajo).

Para el ejemplo, vamos a crear 3 elementos hijos, concretamente 3 divs:

Y vamos a empezar a dar un poco de formato a todo mediante a CSS:

El resultante será:

Ya tenemos por tanto nuestro contenedor y nuestros items hijos, por lo que, ya tenemos todo listo para empezar.

Comprobando la flexibilidad de los elementos

Hasta ahora hemos hablado de flex diciendo que es flexible pero no lo hemos demostrado. Vamos a hacerle una prueba de flexibilidad a nuestro contenedor para verificar el comportamiento de los elementos del interior de nuestro contenedor. Y verificar que sí que son flexibles y que se intentan adaptar/ajustar en medida de lo posible a las dimensiones de su contenedor padre.

Vamos a verlo:

Si vamos reduciendo el ancho de nuestra página(abriendo el inspector y reduciendo el espacio del navegador), podemos ver como se adaptan al contendor nuestros divs hijos.

Flex-wrap de Flex

En el apartado anterior acabamos de testear el concepto de flexibilidad de los elementos y como se adapta a la resolución de pantalla. Pero imaginaros que quisiéramos que estos se adapten al contenedor principal sin perder su aspecto inicial ¿Cómo lo haríamos? Utilizando flex-wrap.

Vamos a ver unos ejemplos:

  • Wrap: los elementos hijos se ajustan al elemento padre manteniendo sus dimensiones, pero desplazándose sobre el eje vertical. Por tanto, mantendrán sus dimensiones iniciales, pero modificar su posicionamiento (bajando los elementos empezando por la derecha).

  • Nowrap: los elementos hijos se ajustan al elemento padre reduciendo sus dimensiones. Por tanto, modificaran sus dimensiones, pero mantendrán su posicionamiento actual.

  • Wrap-reverse: los elementos hijos se posicionan invertidos respecto al wrap normal y, por tanto, se posicionan lo más abajo posible respeto al contenedor padre. Además, cuando reducimos el contenedor esta vez subirán hacía arriba empezando siempre por el elemento más a la derecha. Por tanto, mantendrán sus dimensiones iniciales pero modificarán su posicionamiento inicial (subiendo los elementos de más a la derecha posible).

Flex-direction de Flex:

Flex direction nos permite indicar como se van a posicionar los elementos hijos del contenedor principal. Si lo van a hacer en línea (horizontal) o en bloque (vertical).

Vamos a verla en acción:

  • Column: nos posiciona los elementos contenidos (hijos) en columnas. Además de lo más a la izquierda y lo más arriba posible respeto el contenedor (padre).

  • Column-reverse: nos posiciona los elementos contenidos (hijos) en columnas. Además de lo más a la izquierda y lo más abajo posible respeto el contenedor (padre).

  • Row: nos posiciona los elementos contenidos (hijos) en fila. Además de lo más arriba posible y lo más a la izquierda posible respeto a su elemento contenedor (padre).

  • Row-reverse: nos posiciona los elementos contenidos (hijos) en fila. Además de lo más arriba posible y lo más a la izquierda posible respeto a su elemento contenedor (padre).

Justify-content de Flex

La propiedad justify-content nos permite trabajar en el eje horizontal.

Vamos a ver los diferentes comportamientos de justify-content con diferentes valores:

  • flex-start: es el por defecto, se nos verá igual que si no lo definimos. Por lo que, si queremos que actúen así no hará falta definirlo. Nos posicionaran los elementos hijos lo más a la izquierda posible.

  • flex-end: nos posicionaran los elementos hijos lo más a la derecha posible.

  • center: nos posicionaran los elementos hijos en el centro.

  • space-between: posiciona los elementos a lo largo de contenedor principal.

  • space-around: posiciona los elementos a lo largo del contenedor principal dejando más margen entre los elementos hijos que entre los márgenes laterales.

  • space-evenly: posiciona los elementos a lo largo del contenedor principal dejando el mismo margen entre los elementos hijos que en los margenes laterales.


Align-items de Flex

La propiedad align-items nos permite trabajar en el eje vertical.

Vamos a verla en acción:

  • Center: nos centrará el elemento hijo verticalmente en medio del contenedor padre.

  • Flex-end: nos posicionará elemento hijo lo más abajo posible respeto al eje vertical del contenedor padre.
  • Flex-start: nos posicionará elemento hijo lo más arriba posible respeto al eje vertical del contenedor padre.

  • Stretch: si eliminamos las dimensiones de nuestros divs hijos (ya que si las tenemos definidas las respetará). Stretch, nos permite que nuestros divs hijos se estiren hasta el punto en el que completen el tamaño de nuestro contenedor padre.

  • Baseline: los elementos están alineados justo como si todos estubieran escritos en una misma línea como un de un cuaderno con líneas se tratará.

Ejercicio final

Imaginaos que queremos hacer lo siguiente:

Y que cuando reduzcamos el tamaño del contenedor padre haga el siguiente comportamiento:

¿Cómo hacemos esto? Pues combinando varias de las propiedades de Flex de las que acabamos de ver sobre el contenedor padre para que afecte a sus hijos.

Vamos a ver el código:

Con este ejemplo, acabamos de ver la potencia que tiene Flex Box cuando combinamos varias propiedades. Espero haber cumplido el objetivo de familiarizaros con el tema de Flex y que con ello quede un poco más claro. Un saludo y hasta la próxima 🙂