by Jaime Salas

Cuando maquetábamos páginas HTML a principios del 2000 era muy normal poner eso de "página optimizada para ver en una resolución de 800x600" ... unos años después nos hicimos un poco más modernos y poníamos aquello de "página optimizada para ver en una resolución de 1024x768"... ¿Todo se iba a quedar ahí verdad? Llegaron los móviles, las tablets... y nuestro estándar de HTML se quedaba corto para tratar esta amalgama de resoluciones.

A mediados de 2012 se estableció el estándar CSS3 de las media queries, toda una revolución… esto hacía que la maquetación de una página fuera compleja. Al calor de esa dificultad, florecieron librerías de maquetación como Bootstrap que ocultaban el desafío de maquetar directamente con media queries, permitiéndonos implementar diseños responsivos con un buen nivel de calidad sin tener que quebrarnos la cabeza horas.

¿Qué problemas tienen estas librerías?

  • No son estándar, hay varias opciones cada una de su padre y de su madre.
  • En algunos casos podemos tener riesgo de tener un comportamiento inconsistente en distintos navegadores.
  • Añadimos peso a nuestra página web.
  • En muchos casos tenemos que acabar metiendo JavaScript.

Poco a poco el estándar HTML va evolucionando e incorpora nuevas características, una de ellas es “Flexbox”: nos permite aproximarnos a diseños responsivos de una manera más sencilla e intuitiva.

¿Que vamos a ver?

En éste artículo, introduciremos una aproximación distinta a la hora de maquetar, que nos va a permitir, solventar los problemas citados anteriormente, de una manera más sencilla y limpia.  Y para tal fin utilizaremos Flexbox.

¿En qué consiste Flexbox?

La propiedad Flexible Box, o Flexbox, es un modo de diseño, que permite colocar de una manera predecible nuestros elementos, cuando nuestro diseño debe adaptarse a diferentes tipos de tamaño de pantalla.

El hecho de no utilizar la propiedad float, y que además los márgenes del contenedor flexible no interfieren con los márgenes de sus contenidos, produce unos mejores resultados en la mayoría de los casos, para conseguir un comportamiento responsivo.

El modelo “caja flexible” es más sencillo de utilizar. Los elementos “hijos” de una “caja flexible” pueden colocarse en cualquier dirección y tener dimensiones flexibles para adaptarse al espacio disponible.

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo.

¿Qué navegadores los soportan?

Flebox a base de ejemplos

Mosaico

Vamos a implementar una alternativa de diseño para el típico mosaico de imágenes. En vez de utilizar JavaScript para hacer que las imágenes se desplacen dentro de un marco fijo, utilizaremos Flexbox para mostrar todas las imágenes, pero teniendo en cuenta el espacio disponible para que sean mostradas, de tal manera que nuestro diseño varíe con el espacio disponible.

Resolución escritorio.

 

Resolución tablet.

 

Resolución móvil.

 

 

Básicamente, para implementar el mosaico que nos proponemos, necesitamos dos ingredientes: un contenedor flex, y elementos flex.

Una vez que tenemos estos dos ingredientes, deberemos seleccionar las settings que nos permiten conseguir el comportamiento deseado. Así por ejemplo el contenedor flex, deberá permitir que los elementos generen una nueva fila cuando sea necesario. Para ello utilizamos flex-wrap: wrap

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  /* More code...*/
}

Los elementos del contenedor por su parte tendrán que crecer de una manera determinada, para satisfacer cada una de las distintas resoluciones. En este caso queremos que todos los elementos crezcan por igual, dentro de su fila y con respecto al ancho del viewport, por lo que usamos flex-grow:1 

ul li {
  flex-grow: 1;
  width: 250px;
  /*More code*/
}

Mosiaco Demo 

Footer

Vamos a implementar una alternativa de diseño al típico pie de página al que estamos acostumbrados en CSS. Uno de los problemas que se nos plantea con el footer es que cuando el contenido de nuestro site crece, a veces se hace difícil que el piesea empujado por el contenido. Vamos a ver que utilizando Flexbox, conseguir éste comportamiento es muy sencillo.

 

 

Para conseguir el comportamiento que buscamos, tenemos que convertir el body en un contenedor flex, y hacer que su alto mínimo se adapte como mínimo al 100% del alto del viewport. 

body {
  display: flex;
  min-height: 100vh; 
  flex-direction: column;
  /* More code ... */
}

Una vez hecho esto, todos los elementos que vayan dentro del body son flex ítems, que con su comportamiento por defecto (display block), nos es suficiente para alcanzar el resultado que buscamos.

<body>
  <div class="header-container"></div>
  <div class="main-container"></div>
  <div class="footer-container"></div>
</body>