Diseño flexible de tarjetas | Tutorial de CSS Flexbox

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300067{{"Diseño flexible de tarjetas reactivo"}} css/box_model -.-> lab-300067{{"Diseño flexible de tarjetas reactivo"}} css/display_property -.-> lab-300067{{"Diseño flexible de tarjetas reactivo"}} css/flexbox -.-> lab-300067{{"Diseño flexible de tarjetas reactivo"}} end

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:

Abra el archivo flexible_card.css en su editor.
Localice el selector section en el archivo CSS.
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 */
}

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 */
}

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.

✨ Revisar Solución y Practicar

Resumen

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