Retículas flexibles con flexbox

oct 01, 2015

Ya hemos hablado anteriormente de patrones, grillas y estrategias para el desarrollo de sitios web adaptables con sistemas fluidos tipo Bootstrap960.gs. Pero en esta ocasión, no vamos a hablar de frameworks, sino que volvemos a lo más básico para hablar de una técnica que parece llamada a revolucionar el panorama de la maquetación web. Se trata de Flexbox, una de las herramientas de CSS más poderosas para la construcción de layouts y una alternativa al posicionamiento a través de float, más que recomendable.

Qué permite flexbox:

  1. La propiedad display: flex; permite que los elementos se adapten completamente al espacio disponible. Es decir, si un elemento tiene más espacio alrededor, simplemente se extenderá para rellenarlo o si por el contrario no lo hay, se estrechará.
  2. Además hace posible posicionar elementos de manera muy fácil e incluso se puede cambiar su orden sin necesidad de modificar el HTML.

Veamos un primer ejemplo muy básico: tres divs dentro de un div “contenedor”. Por defecto, estos divs, sin más estilo que sus dimensiones, se posicionarán uno debajo del otro, como bloques. Sin embargo, simplemente aplicando la propiedad display: flex a la caja contenedora, se colocarán uno al lado del otro y, como se puede ver a continuación, si el navegador se estrecha, sus anchos lo harán también.

Este sería el HTML:

<body>
 <div class="contenedor">
   <div class="caja cyan"><p>Caja 1</p></div>
   <div class="caja magenta"><p>Caja 2</p></div>
   <div class="caja amarillo"><p>Caja 3</p></div>
 </div>
</body>

Y aquí el CSS:

.contenedor{
  width: 100%;
  display: flex;
}
.caja{
  width: 350px;
  height: 150px;
}
.cyan{
  background: #0085cf;
}
.magenta{
  background: #e51d9b;
}
.amarillo{
  background: #fee000;
}

¿Sencillo, no? Si quisiéramos que este mínimo layout se comportara como un sistema fluido en el que las cajas van colocándose unas debajo de otras añadiríamos una nueva propiedad a la caja contenedora: flex-wrap: wrap.

Pero todavía hay más. Si necesitáramos cambiar el orden de dichos elementos según el tamaño del viewport, tan solo tendríamos que añadir la propiedad order y combinarla con media queries. Veámoslo:

@media screen and (min-width: 450px){
  .magenta{
    order:1;
  }
  .amarillo{
    order: 2;
  }
  .cyan {
    order: 3;
  }
}
@media screen and (min-width: 600px){
  .amarillo{
    order: 1;
  }
  .cyan{
    order: 2;
  }
  .magenta{
    order: 3;
  }
}

Para dispositivos menores de 450px, los divs se mostrarán según el orden del HTML (caja cyan, caja magenta, caja amarilla); para dispositivos mayores de 450 y menores de 600 se mostrarán en este orden: caja magenta, caja amarilla, caja cyan y para mayores de 600: caja amarilla, caja magenta, caja cyan.

En los dos últimos años la propiedad Display: flex ha cambiado bastante, pero en este punto es una recomendación y está soportado por la mayoría de los navegadores. Aún así, para usarlo conviene utilizar los hacks de los diferentes navegadores para no dejar fuera a usuarios rezagados.

display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Y como siempre, esto es sólo un aperitivo, para quienes quieran saber más aquí van unos cuantos links imprescindibles:

La guía completa de Flexbox:

Un par de artículos de referencia:

Una retícula desarrollada a partir de Flexbox:

Y ¡experimentos!

No comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>