Diseño de disposición de verduras con Flexbox

Introducción

En este proyecto, aprenderás a usar las propiedades CSS de Flexbox para organizar un diseño específico de verduras frescas. Al final de este proyecto, serás capaz de crear un diseño visualmente atractivo utilizando Flexbox, que es una herramienta poderosa para crear diseños web responsivos y dinámicos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el diseño utilizando las propiedades CSS de Flexbox
• Cómo organizar las verduras en las posiciones deseadas dentro del diseño
• Cómo utilizar propiedades de Flexbox como display, justify-content, align-items y align-self para lograr el diseño deseado

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Crear un diseño visualmente atractivo utilizando Flexbox, una herramienta poderosa para crear diseños web responsivos y dinámicos
• Comprender cómo utilizar las propiedades CSS de Flexbox para crear un diseño flexible y responsivo
• Aplicar técnicas para alinear y distribuir elementos dentro de un contenedor de Flexbox
• Implementar estrategias para posicionar elementos dentro de un diseño de Flexbox para lograr un diseño específico

Configurar el proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

1. Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

   • css/style.css
   • index.html

2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Configurar el diseño

En este paso, aprenderás a usar las propiedades CSS de Flexbox para configurar el diseño de la disposición de las verduras.

1. Abre el archivo style.css en tu editor.

2. Dentro del selector #box1, agrega las siguientes propiedades CSS:

   #box1 {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

   Esto centrará el contenido tanto horizontal como verticalmente dentro del contenedor #box1.

3. Dentro del selector #box2, agrega las siguientes propiedades CSS:

   #box2 {
     display: flex;
     justify-content: space-between;
   }
   

   Esto distribuirá los elementos en el contenedor #box2 de manera equitativa con espacio entre ellos.

4. Dentro del selector #box2.item:nth-child(2), agrega la siguiente propiedad CSS:

   #box2.item:nth-child(2) {
     align-self: flex-end;
   }
   

   Esto alineará el segundo elemento en #box2 en la parte inferior del contenedor.

Organizar las verduras

En este paso, aprenderás a usar las propiedades CSS de Flexbox para organizar las verduras en las posiciones deseadas.

1. Dentro del selector #box3, agrega las siguientes propiedades CSS:

   #box3 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
   

   Esto creará un diseño en fila para los elementos en #box3 y los distribuirá equitativamente con espacio entre ellos.

2. Dentro del selector #box3.item:nth-child(2), agrega la siguiente propiedad CSS:

   #box3.item:nth-child(2) {
     align-self: center;
   }
   

   Esto alineará el segundo elemento en #box3 al centro del contenedor.

3. Dentro del selector #box3.item:nth-child(3), agrega la siguiente propiedad CSS:

   #box3.item:nth-child(3) {
     align-self: flex-end;
   }
   

   Esto alineará el tercer elemento en #box3 en la parte inferior del contenedor.

Después de completar estos pasos, tu archivo style.css debe coincidir con la solución proporcionada y el diseño de las verduras debe coincidir con el ejemplo finalizado.

El resultado final es el siguiente:

Resumen

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