Diseño flexible de tarjetas reactivo

Introducción

En este proyecto, aprenderás a crear un diseño flexible de tarjetas utilizando CSS Flexbox. El diseño flexible de tarjetas es un patrón de diseño común utilizado en páginas web y aplicaciones, donde el contenido se muestra en una estructura similar a una cuadrícula reactiva y adaptable.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo seleccionar los elementos que se van a colocar como cajas flexibles
• Cómo controlar el envuelto de los elementos flexibles dentro del contenedor flexible
• Cómo controlar la posición de los elementos flexibles en el eje principal

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar CSS Flexbox para crear un diseño reactivo y flexible
• Aplicar técnicas para controlar el comportamiento de los elementos flexibles dentro de un contenedor flexible
• Implementar estrategias para posicionar y distribuir los elementos flexibles a lo largo del eje principal

Configurar la estructura del proyecto

En este paso, aprenderás a configurar la estructura del proyecto.

Para comenzar, abre el editor. Deberías ver dos archivos: flexible_card.html y flexible_card.css en tu editor.

Haz clic en "Go Live" en la esquina inferior derecha para abrir el puerto 8080 y previsualizar la página flexible_card.html en el navegador. El efecto será el siguiente:

Configurando diseños flexibles

En este paso, aprenderás a utilizar elementos flexibles para el diseño para alcanzar el efecto deseado. Siga los pasos siguientes para completar este paso:

1. Abra el archivo flexible_card.css en su editor.
2. Localice el selector section en el archivo CSS.
3. Agregue la propiedad display: flex; al selector section para hacer que el elemento <section> sea un contenedor flexible.

El código CSS actualizado debería verse así:

section {
  display: flex; /* Hacer que la sección sea un contenedor flexible */
  /* Otros estilos */
}

4. Agregue la propiedad flex-wrap: wrap; al selector section para permitir que los elementos flexibles se envuelvan a la siguiente línea si no caben en la misma línea.

El código CSS actualizado debería verse así:

section {
  display: flex;
  flex-wrap: wrap; /* Permitir que los elementos flexibles se envuelvan a la siguiente línea */
  /* Otros estilos */
}

5. Agregue la propiedad justify-content: space-between; al selector section para distribuir los elementos flexibles uniformemente a lo largo del eje principal, con un espacio igual entre ellos.

El código CSS actualizado debería verse así:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Distribuir los elementos flexibles uniformemente a lo largo del eje principal */
  /* Otros estilos */
}

Después de completar estos tres pasos, su archivo flexible_card.css debería verse así:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

Ahora, su diseño flexible de tarjetas debería estar completo y coincidir con el resultado final mostrado en el ejemplo.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.