Crea una fuente de frutas visualmente atractiva con CSS Flexbox

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

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/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300081{{"Una fuente de frutas visualmente atractiva"}} css/box_model -.-> lab-300081{{"Una fuente de frutas visualmente atractiva"}} css/width_and_height -.-> lab-300081{{"Una fuente de frutas visualmente atractiva"}} css/display_property -.-> lab-300081{{"Una fuente de frutas visualmente atractiva"}} css/flexbox -.-> lab-300081{{"Una fuente de frutas visualmente atractiva"}} 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 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.

Vista previa de la estructura del proyecto sin terminar

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.css en 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:

✨ Revisar Solución y Practicar

Resumen

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