Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribución de componentes9/17
A la lista de tareas
  1. 1. Columnas para un componente
  2. 2. Flexbox dentro de grid
  3. 3. Márgenes y relleno de los enlaces
  4. 4. Enlaces con cajas de bloque
  5. 5. Alineación vertical con align-items
  6. 6. Varias líneas con flex-wrap
  7. 7. Ancho y relleno de las tarjetas
  8. 8. Distribución con justify-content
  9. 9. Separación con margin
  10. 10. Márgenes y :nth-child
  11. 11. Pruebas con distintos anchos
  12. 12. Columnas con repeat y separación con gap
  13. 13. El valor auto-fit
  14. 14. La función minmax
  15. 15. La propiedad grid-column
  16. 16. La propiedad grid-row
  17. 17. La propiedad grid-auto-flow
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Separación con margin

Al añadir dos tarjetas y permitir varias líneas, la lista pasó a tener dos filas. Sin embargo, quedó un «hueco» en el centro de la segunda fila.

Recetas para Año Nuevo
Recetas para Año Nuevo
Guía de métodos alternativos de preparación
Guía de métodos alternativos de preparación

El valor space-between coloca la primera y la última tarjeta junto a los bordes del contenedor. Pero, si solo hay dos tarjetas en una fila, queda demasiado espacio libre entre ellas.

No podemos asignar una alineación distinta a cada fila, así que dejaremos de usar space-between. Lo sustituiremos por flex-start, el valor predeterminado. Las tarjetas volverán a colocarse junto al borde izquierdo del contenedor. Para separarlas, usaremos margin.

Tomaremos las medidas de los márgenes del diseño:

Diseño de la lista de tarjetas

Cambiaremos el valor de justify-content y añadiremos un margen derecho a las tarjetas para separarlas horizontalmente. Después añadiremos un margen inferior para separarlas en vertical.

.element {
  margin-right: 20px;
  margin-bottom: 10px;
}
  • 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> <li class="card"> <img src="img/coffee-5.jpg" alt="Recetas para Año Nuevo" width="110" height="110"> <h2>Recetas para Año Nuevo</h2> </li> <li class="card"> <img src="img/coffee-7.jpg" alt="Guía de métodos alternativos de preparación" width="110" height="110"> <h2>Guía de métodos alternativos de preparación</h2> </li> </ul> </body> </html>
CSS
body { width: 490px; margin: 15px; } .cards-list { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 20px; } .card { width: 110px; padding: 15px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Cambia el valor de justify-content a flex-start.
    2. Añade a las tarjetas card márgenes derecho e inferior de 15px. Quedarán dos tarjetas por fila.
    Codigo Heroe

    © 2023-2026, codigoheroe.com