Tutorial: Galería Flexbox con Filas

a) Crear el contenedor principal

El contenedor principal agrupa todas las filas de imágenes. Usamos display: flex con flex-direction: column para apilar las filas verticalmente.

<div class="contenedor-principal">

</div>

/* CSS */
.contenedor-principal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 3px solid #333;
}

Paso 2: Crear las filas de imágenes

b) Contenedor de cada fila

Cada fila contiene varias imágenes dispuestas horizontalmente. Usamos display: flex con flex-direction: row para colocar las imágenes una al lado de la otra.

<div class="fila">

</div>

/* CSS */
.fila {
  display: flex;
  flex-direction: row;
  gap: 15px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 2px solid #666;
}

Paso 3: Añadir las imágenes

c) Contenedor individual de cada imagen

Cada imagen va dentro de un contenedor .item. La propiedad flex: 1 hace que todas las imágenes ocupen el mismo ancho dentro de la fila. Usamos imágenes de Picsum Photos, un servicio gratuito sin royalties.

<div class="item">
<img src="https://picsum.photos/300/200?random=1" alt="Imagen 1">
<p>Imagen 1</p>
</div>

/* CSS */
.item {
  flex: 1;
  text-align: center;
}

.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 2px solid #999;
  border-radius: 8px;
}

.item p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #555;
}

Paso 4: Entender flex-direction

d) Cómo funciona flex-direction

La propiedad flex-direction define la dirección principal en la que se colocan los elementos flex dentro del contenedor.

Valores posibles:

row (por defecto): Los elementos se colocan en horizontal, de izquierda a derecha
column: Los elementos se apilan verticalmente, de arriba a abajo
row-reverse: Horizontal pero en orden inverso (derecha a izquierda)
column-reverse: Vertical pero en orden inverso (abajo a arriba)

En nuestra galería:

El contenedor-principal usa flex-direction: column para apilar las filas verticalmente
Cada fila usa flex-direction: row para colocar las imágenes horizontalmente

/* Contenedor principal: apila filas verticalmente */
.contenedor-principal {
  display: flex;
  flex-direction: column;
}

/* Cada fila: coloca imágenes horizontalmente */
.fila {
  display: flex;
  flex-direction: row;
}

Código HTML completo

Aquí tienes el código HTML completo para copiar en CodePen:

<div class="contenedor-principal">

  
  <div class="fila">
    <div class="item">
      <img src="https://picsum.photos/300/200?random=1" alt="Imagen 1">
      <p>Imagen 1</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/300/200?random=2" alt="Imagen 2">
      <p>Imagen 2</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/300/200?random=3" alt="Imagen 3">
      <p>Imagen 3</p>
    </div>
  </div>

  
  <div class="fila">
    <div class="item">
      <img src="https://picsum.photos/300/200?random=4" alt="Imagen 4">
      <p>Imagen 4</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/300/200?random=5" alt="Imagen 5">
      <p>Imagen 5</p>
    </div>
  </div>

  
  <div class="fila">
    <div class="item">
      <img src="https://picsum.photos/300/200?random=6" alt="Imagen 6">
      <p>Imagen 6</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/300/200?random=7" alt="Imagen 7">
      <p>Imagen 7</p>
    </div>
    <div class="item">
      <img src="https://picsum.photos/300/200?random=8" alt="Imagen 8">
      <p>Imagen 8</p>
    </div>
  </div>

</div>

Código CSS completo

Y el código CSS completo para copiar en CodePen:

.contenedor-principal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 3px solid #333;
}

.fila {
  display: flex;
  flex-direction: row;
  gap: 15px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 2px solid #666;
}

.item {
  flex: 1;
  text-align: center;
}

.item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 2px solid #999;
  border-radius: 8px;
}

.item p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #555;
}

Tutorial: Galería de Imágenes con Flexbox (Varias Filas)

Paso 1: Estructura del contenedor principal