Creando galerías de imágenes Responsive con Flexbox de CSS3

Existen varias formas de hacer que nuestras imágenes y galerías de estas sean responsive, pero hoy día la forma más fácil de crearlas es utilizando las funciones Flexbox que nos ofrece CSS3 para crear contenido adaptable de forma inteligente y sin mucho código.

galerias-de-imagenes-Responsive-con-Flexbox-de-CSS3

Si no sabes cómo funcionan las características Flexbox de CSS3, te invito a ver este tutorial donde se explican los aspectos esenciales: Entendiendo Flexbox de CSS3

Bien, lo que queremos hacer es una galería de imágenes que se adapten al viewport donde se está visualizando sin tocar html ni crear estructuras extrañas, solo con un par de reglas de estilos CSS.

Para comenzar vamos a necesitar la estructura básica de HTML que es un contenedor con divs por dentro y dentro de ellos las respectivas imágenes.

El HTML

Como dije anteriormente, necesitamos un contenedor que en este caso es una etiqueta section con clase galería, y adentro están las imágenes anidadas por divs totalmente independientes.

Los CSS

Si tienes los conceptos claros del modulo Flexbox de CSS3 te parecerá súper fácil el bloque anterior de CSS.

En el div contenedor aparte de los estilos básicos le damos un display:flex para establecer que el contenedor sea flexible y sea usando como referencia para las funciones de flexbox, aplicamos flex Wrap para que los contenidos no desborden de su elemento contenedor, en este caso los divs donde se encuentran las imágenes y cada uno con el prefijo –ms- para Internet Explorer versión 10 ”en versiones anteriores esta técnica no funciona”.
Luego a los div le damos un flex: auto para que se auto ajusten teniendo como referencia el tamaño de su contenedor, y utilizamos un bloque de Media Queries para ajustar un poco la galería cuando sea visualizada en dispositivos con resolución mínima a 400px, básicamente quitamos márgenes y padding.

Nota: Utilizamos medidas relativas al viewport en vez de px o ems por ejemplo, porque estas unidades de longitud son ideales para trabajar en proyectos responsive. Para saber más acerca de estas unidades de longitud de CSS3 relativas al viewport, este tutorial.

Y listo!! esto es todo, Ya tenemos una galería de imágenes basada en Flexbox, que aunque no es implementada correctamente en los navegadores antiguos (ver soporte en navegadores del modulo Flexbox), sin duda es el presente y futuro de la web.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

4 Respuestas

  1. lee dice:

    Hola,
    sabeis de algo parecido que muestre las fotos de una carpeta de forma automatica.
    un slideshow.
    pero necesitaria que fuera responsible… o que lo pueda adaptar facilmente con mis conocimientos limitados…

    Gracias

  2. lopez dice:

    Los diseños responsive de hoy se basan solamente en este Flexbox? buen tçutorial johanso.

  3. ervin dice:

    muy bueno, es de mucha ayuda, adelante, no se si hubiera la posibilidad que hagas un manual pdf del los tutos

  4. Ramiro M dice:

    Cool, gracias por el tuto