El modelo de caja flexible, o mejor conocido como Flexbox, es un módulo que facilita la distribución de los elementos en la página. Es un modulo de CSS que actualmente está dentro de los candidatos recomendados de Octubre del 2017 para ser parte del estandar de la W3C [3].

Flexbox representa un modelo unidimensional de distribución de espacio que ayuda a mejorar la distribución de elementos en el interfaz y su alineación. Unidimensional quiere decir que flexbox maneja el layout en una sola dimensión (o eje) a la vez: como fila (de manera horizontal) o como columna (de manera vertical) [3].

Trabajar con flexbox implica pensar en términos de dos ejes: eje principal y eje cruzado. El eje principal es el eje que se considerará de manera prioritaria para ubicar los items del contendor. El eje cruzado es perpendicular al eje principal. Por ejemplo, si el eje principal se define como “filas” (row), entonces el eje cruzado serán las “columnas” (column), y viceversa.

De manera simple, aplicar flexbox consiste en:

1. Definir un contenedor flex mediante la propiedad display.Es decir, en el estilo del elemento HTML debe declararse la propiedad display:flex
2. Aplicar alguna de las propiedades al contenedor. Algunas de las propiedades, tal vez más usadas, son las que se muestran en la Tabla 1.
3. Aplicar alguna de las propiedades a los items dentro del contenedor.

A pesar de que en este documento se listan algunas de las propiedades, el lector puede encontrar un resumen gráfico e intuitivo sobre la aplicación de las propiedades de flexbox en la guía publicada por CSS-Tricks: