Teoría
Teoría

Distribución con justify-content

Ya dimos ancho y relleno a las tarjetas. Por ahora aparecen de arriba abajo, pero necesitamos colocarlas en una fila. Usaremos flexbox.

La primera y la última tarjeta de cada fila deben quedar junto a los bordes del contenedor, y el espacio libre debe repartirse por igual entre las tarjetas. Para ello sirve justify-content con el valor space-between.

La lista puede tener muchas tarjetas. Añadiremos algunas más y permitiremos que los elementos flex pasen a otra línea, como hicimos con la navegación.

Convertiremos la lista de tarjetas en un contenedor flex y alinearemos sus elementos en el eje principal. Después añadiremos un par de tarjetas y permitiremos varias líneas para que no se desborden.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="list-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Lista de tarjetas</title> </head> <body> <ul class="cards-list"> <li class="card"> <img src="img/coffee-1.jpg" alt="Café: el largo viaje del cafeto a tu taza" width="110" height="110"> <h2>Café: el largo viaje del cafeto a tu taza</h2> </li> <li class="card"> <img src="img/coffee-2.jpg" alt="Las mejores cafeteras para casa" width="110" height="110"> <h2>Las mejores cafeteras para casa</h2> </li> <li class="card"> <img src="img/coffee-4.jpg" alt="Consejos de barista: ¿qué café elegir?" width="110" height="110"> <h2>Consejos de barista: ¿qué café elegir?</h2> </li>  </ul> </body> </html>

CSS

body { width: 490px; margin: 15px; } .cards-list { margin: 0; padding: 20px; } .card { width: 110px; padding: 15px; }

ObjetivosRealizado

Convierte la lista cards-list en un contenedor flex.
Aplica la alineación space-between en el eje principal.
En index.html, descomenta el código de las líneas 24-31. Las nuevas tarjetas se desbordarán.
En style.css, añade a la lista flex-wrap con el valor wrap.
Fíjate en que las tarjetas pasaron a otra fila, pero quedó un «hueco» en el centro.