5.4.17

Galería de imágenes responsiva con flexbox


Con flexbox es posible hacer una galería de elementos que se coloquen en filas y, si hay menos elementos en alguna de ellas, que estos reajusten su tamaño para tomar todo el ancho posible.

Abrir en Codepen y ajustar el ancho de la ventana para ver los cambios:
See the Pen Image gallery with flexbox by jProgr (@jProgr) on CodePen.


El contenedor (.flex-container) debe tener un ancho definido, en este caso se define como el 80% de la pantalla. flex-direction: row; flex-wrap: wrap; indican que los elementos se deben colocar en una fila, y si no caben, los demás se colocan en filas subsecuentes. Luego se especifica el ancho de cada div que contiene una imagen; como cada uno de estos está espcificado como flex: auto, entonces width: 200px; se comporta como si fuera el mínimo posible. Por último se le indica a la imagen dentro de cada div que debe tomar el 100% de su contenedor y una altura automática para mantener el aspect ratio de las imágenes. Por lo tanto, como el ancho de cada div es impuesto por flexbox, las imágenes acomodan su tamaño al del div.

Más: Image gallery with flexbox. Crafting Better Responsive Image Galleries With Flexbox. A Better Responsive Image Gallery With Flexbox. A Complete Guide to Flexbox.