Crear una galería de imágenes responsive con Flexbox

¿Qué conocemos como Flexbox?

Flexbox es un modelo de diseño en CSS que permite a los elementos de una página web organizarse de manera flexible y predecible, controlando la distribución y alineación de los elementos en un contenedor. Con Flexbox se pueden crear diseños responsivos y complejos con menos código que otros métodos de diseño, lo que facilita la creación de diseños modernos y dinámicos.

En el siguiente ejemplo creamos un contenedor con la clase "gallery" que utiliza flexbox para organizar las imágenes. Las mismas se colocan en una fila y se envuelven de forma automática en filas adicionales si no caben en la fila actual. Mediante la propiedad justify-content se distribuye uniformemente el espacio entre las imágenes. 

A cada imagen se le asigna un ancho de aproximadamente 33.333% del ancho del contenedor padre, y en cada imagen se coloca en un contenedor con la clase "image". Finalmente, establecemos el ancho de las imágenes en un 100% para que se ajusten al ancho del contenedor y mantengan su relación de aspecto original. 

Se pueden modificar los estilos y contenido según tus propias necesidades.

HTML:

<div class="gallery">
  <div class="image"><img src="img1.jpg" alt="Image 1"></div>
  <div class="image"><img src="img2.jpg" alt="Image 2"></div>
  <div class="image"><img src="img3.jpg" alt="Image 3"></div>
  <div class="image"><img src="img4.jpg" alt="Image 4"></div>
  <div class="image"><img src="img5.jpg" alt="Image 5"></div>
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.image {
  flex: 0 0 calc(33.333% - 10px);
  margin-bottom: 20px;
}
.image img {
  width: 100%;
  height: auto;
}