Ventajas del desarrollo web con Flexbox

Desde la década de los 2000 y ante el uso cada vez más frecuente de los dispositivos móviles, surgió la necesidad de crear un nuevo entorno de desarrollo gráfico que fuese capaz de adaptarse y fluir por las distintas resoluciones de pantallas.

Fue así como en la década de 2010 se impulsaron y se pusieron de moda frameworks como Bootstrap, desarrollado por Twitter, Foundation o Boilerplate.

Estas reglas de estilo fueron evolucionando hasta formar los que hoy en día llamamos CSS Flexible Box Layout commonly, más conocido como Flexbox, dentro del modelo de diseño web de CSS3.

Beneficios de Flexbox

Flexbox nos permite alinear los contenidos tanto horizontal como verticalmente de forma mucho más sencilla de lo que se venia haciendo hasta ahora, dejando a un lado propiedades como float o position que podían llegar a dar conflictos.

Con Flexbox la alineación es mucho más fácil con propiedades como Justify-content o Align-items, como veremos más adelante.

El alineado vertical siempre ha sido un problema pero con Flexbox esto se resuelve de forma mucho más sencilla e intuitiva.

Esta metodología es también aplicable a la creación y personalización de plantillas de WordPress. Editando tanto los archivos que pintan los contenidos como, por ejemplo el single.php, o los archivos de hojas de estilos como el style.css, podemos dar a nuestra web en WordPress el aspecto que deseemos.

Principales reglas de Flexbox

De esta forma con una sencilla regla definimos que los bloques de ese contenedor van a ser flexibles:

.container { display: flex;}

flex-direction

Con el atributo flex-direction podemos definir el eje en el que van a aparecer los bloques que lo componen:

.container { flex-direction: row;}

See the Pen Lobrgm by Jose (@AinaraIpina) on CodePen.dark

.container { flex-direction: row-reverse;}

See the Pen yWVQZK by Jose (@AinaraIpina) on CodePen.dark

.container { flex-direction: column;}

See the Pen WBoYBZ by Jose (@AinaraIpina) on CodePen.dark

.container { flex-direction: column-reverse; }

See the Pen RmoJeE by Jose (@AinaraIpina) on CodePen.dark

flex-wrap

Esta regla resulta especialmente útil a la hora de presentar menús, ya sean horizontales o verticales.

La propiedad flex-wrap se utiliza para permitir o denegar que los elementos salten de línea cuando sobrepasa su contenedor, así:

.container{flex-wrap: wrap;}

See the Pen yWoWWR by Jose (@AinaraIpina) on CodePen.dark

.container{flex-wrap: nowrap;}

See the Pen vwyvKX by Jose (@AinaraIpina) on CodePen.dark

justify-content

justify-content es otro atributo muy útil para alinear horizontalmente los contenidos de los bloques.

.container { justify-content: flex-start; }

See the Pen EzNGXY by Jose (@AinaraIpina) on CodePen.dark

.container { justify-content: flex-end; }

See the Pen ZNBVyP by Jose (@AinaraIpina) on CodePen.dark

.container { justify-content: center; }

See the Pen BedXwX by Jose (@AinaraIpina) on CodePen.dark

.container { justify-content: space-between; }

See the Pen PvbXQO by Jose (@AinaraIpina) on CodePen.dark

La diferencia entre space-between y space-around es que mientras que space-between separa los items entre ellos por igual, con space-around además de separar los items entre sí también los separa de los bordes que los contienen.

.container { justify-content: space-around; }

See the Pen qGqLoZ by Jose (@AinaraIpina) on CodePen.dark

align-items

Con align-items alinearemos los contenidos, pero en esta ocasión de forma vertical.

.container { align-items: stretch; }

See the Pen WBoPQW by Jose (@AinaraIpina) on CodePen.dark

.container { align-items: flex-start; }

See the Pen WBoPrW by Jose (@AinaraIpina) on CodePen.dark

.container { align-items: flex-end; }

See the Pen KLNJXw by Jose (@AinaraIpina) on CodePen.dark

.container { align-items: center; }

See the Pen xNRMOq by Jose (@AinaraIpina) on CodePen.dark

.container { align-items: baseline; }

See the Pen yWoWWR by Jose (@AinaraIpina) on CodePen.dark

Desarrollo con Flexbox en Estudio Ainara Ipiña

Esta es una pequeña introducción de las posibilidades que ofrece Flexbox.

Desde Estudio Ainara Ipiña apostamos por este entorno de desarrollo para adaptar y crear las plantillas de WordPress y Prestashop a las necesidades y gustos de nuestros clientes, creando diseños únicos para cada uno de ellos.