Introducción
En este proyecto, aprenderás a crear una fuente de frutas visualmente atractiva utilizando CSS Flexbox. El objetivo es posicionar las frutas del mismo color en el centro de sus respectivas tablas de color, creando una presentación armoniosa y estéticamente agradable.
👀 Vista previa
🎯 Tareas
En este proyecto, aprenderás:
- Cómo configurar un contenedor flexible para organizar las frutas en la fuente
- Cómo posicionar las frutas del mismo color en el centro de sus respectivas tablas de color
🏆 Logros
Después de completar este proyecto, podrás:
- Utilizar CSS Flexbox para crear un diseño similar a una cuadrícula
- Centrar y alinear elementos dentro de un contenedor flexible
- Organizar y presentar efectivamente elementos en una página web de manera visualmente atractiva
Configurar la estructura del proyecto
En este paso, aprenderás a configurar la estructura del proyecto.
Para comenzar, abre el editor. Deberías ver algunos archivos: index.html, style.css e images en tu editor.
Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.
Configurar el contenedor flexible
En este paso, aprenderás a configurar el contenedor flexible para organizar las frutas en la fuente.
- Abre el archivo
index.cssen tu editor de código. - Dentro del selector
#pond, agrega las siguientes propiedades CSS:
#pond {
/* TODO: Agrega tu código CSS aquí */
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
La propiedad display: flex establece el elemento #pond como un contenedor flexible, lo que nos permite utilizar el diseño de flexbox para posicionar las frutas.
La propiedad flex-direction: column apila los elementos flexibles (los contenedores de frutas) verticalmente.
La propiedad flex-wrap: wrap permite que los elementos flexibles se envuelvan a la siguiente línea si no caben en la línea actual.
El resultado final es el siguiente:
Resumen
¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.
