CSS Flexbox: más opciones de diseño web

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) permiten dar el diseño adecuado a las páginas web. Si bien HTML ofrece solo los elementos básicos más im­po­r­ta­n­tes, mediante CSS se puede im­ple­me­n­tar un diseño web complejo: incrustar imágenes de manera adecuada, organizar el texto o in­co­r­po­rar elementos de modo que destaquen en la página web. Este útil lenguaje de marcado se de­sa­rro­lla co­n­s­ta­n­te­me­n­te para si­m­pli­fi­car el trabajo con las páginas web y pro­po­r­cio­nar a los pro­fe­sio­na­les nuevas opciones de diseño. Otro modelo de este tipo es CSS Flexbox: una he­rra­mie­n­ta im­po­r­ta­n­te para diseñar las páginas web que se necesitan en la era móvil.

Una de las pri­n­ci­pa­les funciones de la hoja de estilo en cascada o CSS es maquetar todos los elementos de la página web: el texto, las imágenes y los botones se pueden organizar en detalle, de­te­r­mi­na­n­do dónde debe aparecer cada elemento en la pantalla hasta el más mínimo píxel. No obstante, esto solo es posible si se conoce el tamaño de la pantalla y su relación de aspecto. En la era del Internet móvil, con su gran variedad de opciones en ese sentido (los sma­r­t­pho­nes suelen cambiar de orie­n­ta­ción al in­cli­nar­los), no es posible lograr un resultado co­n­vi­n­ce­n­te con las cajas rígidas típicas del CSS.

El flexbox (más co­n­cre­ta­me­n­te, CSS Flexible Box Layout o diseño de caja flexible CSS) funciona de manera más in­te­li­ge­n­te y dinámica: el diseño se adapta de forma flexible a la pantalla donde se muestra, siguiendo el concepto del diseño receptivo. El espacio se llena o los elementos se desplazan de modo que todo pe­r­ma­ne­z­ca visible. Para lograrlo sin de­s­ma­n­te­lar el diseño por completo, flexbox funciona con dos ejes: el eje principal, que suele ser el ho­ri­zo­n­tal, y el eje tra­n­s­ve­r­sal o vertical. Mediante estos ejes, los elementos se organizan dentro de la caja y se di­s­tri­bu­yen en relación unos con otros. Una vez hecho esto, CSS Flexbox no tiene más que ga­ra­n­ti­zar que el espacio que hay alrededor de estos elementos se llene co­rre­c­ta­me­n­te.

Cua­l­quie­ra que se dedique a diseñar páginas web ac­tua­l­me­n­te debería aprender a utilizar CSS Flexbox, porque esta te­c­no­lo­gía facilita mucho el trabajo con tamaños de pantalla variables y, gracias a su es­tru­c­tu­ra, permite lograr re­su­l­ta­dos muy atra­c­ti­vos con solo unas pocas líneas de código.

Flexbox se basa en un co­n­te­ne­dor flexible (flex container), que a su vez contiene varios elementos flexibles (flex items). El co­n­te­ne­dor otorga sus pro­pie­da­des a los elementos, es decir: los elementos o flexboxes deben su fle­xi­bi­li­dad al hecho de estar dentro del co­n­te­ne­dor.

Cada uno de los dos ejes sigue una dirección: por lo general, el eje principal va de izquierda a derecha, mientras que el eje tra­n­s­ve­r­sal va de arriba a abajo. Flexbox se describe como un sistema uni­di­me­n­sio­nal: los elementos se pueden organizar en filas o columnas, y nunca se pretende combinar ambas. Por ejemplo, si te decides por la di­s­po­si­ción en filas (la estándar de esta te­c­no­lo­gía), CSS Flexbox intentará organizar todos los elementos en una sola fila, aunque también es posible evitarlo y forzar un salto de línea.

Antes de comenzar a organizar los elementos, primero debes crearlos. La forma de hacerlo es mediante HTML, como de costumbre:

Los tres elementos se mo­s­tra­rían si­m­ple­me­n­te uno debajo del otro. Ahora, uti­li­za­mos CSS para di­s­tri­bui­r­los en el eje principal:

En esta hoja de estilo, se ha definido el co­n­te­ne­dor. La propiedad display: flex habilita la flexbox. Los elementos se di­s­tri­bu­yen de izquierda a derecha, ya que no lo hemos definido de otra manera. También es posible hacerlo mediante cinco opciones distintas, co­n­fi­gu­ra­bles con el comando justify-content:

• flex-start: ju­s­ti­fi­ca­do a la izquierda
• flex-end: ju­s­ti­fi­ca­do a la derecha
• center: ju­s­ti­fi­ca­do en el centro
• space-around: di­s­tri­bu­ye uni­fo­r­me­me­n­te el espacio alrededor de las cajas
• space-between: di­s­tri­bu­ye uni­fo­r­me­me­n­te el espacio entre las cajas

El resto del código hasta este punto solo es estético y no tiene nada que ver con las cajas flexibles en sí.

El modelo CSS Flexbox parte de la ali­nea­ción ho­ri­zo­n­tal, aunque también es posible organizar los elementos en una columna. Además, se puede invertir la dirección, de izquierda a derecha o de abajo a arriba. Para ello, se utiliza el comando flex-direction:

• row: de izquierda a derecha
• row-reverse: de derecha a izquierda
• column: de arriba abajo
• column-reverse: de abajo a arriba

El comando justify-content: flex-end no es igual que flex-direction: row-reverse. Mientras que en el primero se ajusta el último elemento al borde derecho, en el segundo, se cambia el orden co­m­ple­ta­me­n­te, lo que significa que el primer elemento del código aparece en el borde derecho.

Hasta ahora, hemos colocado las cajas flexibles de manera uniforme. No obstante, en diseño web, no siempre deseamos que todos los elementos se di­s­tri­bu­yan por igual. Por ejemplo, a veces queremos que el texto se muestre de manera diferente a una imagen. Para lograrlo, podemos agrupar los elementos en el texto HTML:

Con justify-content, los elementos se pueden di­s­tri­buir con una cierta relación entre sí en el eje ho­ri­zo­n­tal. En cambio, si quieres que el contenido se muestre de arriba a abajo (en el eje tra­n­s­ve­r­sal), ne­ce­si­ta­rás el comando align-items. En este caso, también hay cinco opciones distintas:

• center: los objetos se centran.
• flex-start: los objetos se ajustan al borde superior.
• flex-end: los objetos se ajustan al borde inferior.
• stretch: los objetos se muestran con el mismo tamaño.
• baseline: los objetos se organizan en la línea de base (según el contenido).

A primera vista, las opciones flex-start y baseline parecen ofrecer los mismos re­su­l­ta­dos, pero presentan una di­fe­re­n­cia que se hace es­pe­cia­l­me­n­te evidente cuando los objetos están anidados: mientras que flex-start solo vincula dos flexboxes que están en el mismo nivel je­rá­r­qui­co, baseline también tiene en cuenta el contenido que hay en las cajas.

Con el siguiente código, se pueden centrar tres objetos de di­fe­re­n­tes tamaños uno al lado del otro:

La di­s­tri­bu­ción vertical también puede mo­di­fi­car­se mediante saltos de línea. Si colocaras muchos objetos en un co­n­te­ne­dor, se­n­ci­lla­me­n­te se seguirían mostrando en formato ho­ri­zo­n­tal, de modo que el usuario tendría que de­s­pla­zar­se y salir del área de la pantalla para verlos. Con flex-wrap, te aseguras de que los elementos se di­s­tri­bu­yen de forma ordenada en varias líneas.

• nowrap: sin salto de línea
• wrap: salto de línea
• wrap-reverse: salto de línea (ordenado a la inversa)

Hasta ahora, la di­s­po­si­ción siempre se ha aplicado a todo el co­n­te­ne­dor, de manera que todas las cajas incluidas dentro del mismo siguen los comandos generales. Esto facilita el trabajo, pero, al mismo tiempo, también lo limita. Por este motivo, CSS Flexbox ofrece a los di­se­ña­do­res web la opo­r­tu­ni­dad de definir ex­ce­p­cio­nes. Para ello, se utiliza el comando order. El valor pre­de­te­r­mi­na­do (si el usuario no define otro) es 0. El valor añade el objeto a un grupo abstracto: todos los elementos que hemos creado hasta ahora pe­r­te­ne­cen al mismo grupo, porque todos tienen el valor 0. Partiendo de este valor, ahora puedes mover cada objeto hacia adelante (-1) o hacia atrás (1).

Si dejas todos los elementos en valor 0 excepto uno al que le des el valor 1, este objeto se mostrará después del resto de elementos. El objeto también puede de­s­pla­zar­se asi­g­ná­n­do­le otros valores (su­pe­rio­res o in­fe­rio­res). Ten en cuenta que se trata de una re­pre­se­n­ta­ción puramente visual: la secuencia lógica de acuerdo con el documento HTML no cambia.

De momento solo hemos hablado de la di­s­po­si­ción flexible de los objetos. En todos los casos, las re­la­cio­nes de tamaño se han es­ta­ble­ci­do mediante el CSS clásico en el código de muestra. No obstante, las flexboxes también pueden adaptarse en tamaño. Para ello, se utiliza el comando flex. De forma parecida al orden, los elementos pueden dividirse en grupos; cuanto mayor es el valor, más espacio ocupa el elemento.