Créer un plateau de fruits esthétiquement agréable avec CSS Flexbox

Introduction

Dans ce projet, vous allez apprendre à créer un plateau de fruits esthétiquement agréable à l'aide de CSS Flexbox. L'objectif est de positionner les fruits de la même couleur au milieu de leurs panneaux de couleur correspondants, créant ainsi un affichage harmonieux et esthétiquement plaisant.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer un conteneur flex pour organiser les fruits sur le plateau
Comment positionner les fruits de la même couleur au milieu de leurs panneaux de couleur correspondants

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser CSS Flexbox pour créer un layout ressemblant à une grille
Centrer et aligner des éléments à l'intérieur d'un conteneur flex
Organiser et présenter efficacement des éléments sur une page web de manière esthétiquement agréable

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{{"Plateau de fruits esthétiquement agréable"}} css/box_model -.-> lab-300081{{"Plateau de fruits esthétiquement agréable"}} css/width_and_height -.-> lab-300081{{"Plateau de fruits esthétiquement agréable"}} css/display_property -.-> lab-300081{{"Plateau de fruits esthétiquement agréable"}} css/flexbox -.-> lab-300081{{"Plateau de fruits esthétiquement agréable"}} end

Configurer la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet.

Pour commencer, ouvrez l'éditeur. Vous devriez voir quelques fichiers - index.html, style.css et images dans votre éditeur.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Aperçu de la structure du projet non terminé

Configurer le conteneur flex

Dans cette étape, vous allez apprendre à configurer le conteneur flex pour organiser les fruits sur le plateau.

Ouvrez le fichier index.css dans votre éditeur de code.
Dans le sélecteur #pond, ajoutez les propriétés CSS suivantes :

#pond {
  /* TODO : Ajoutez votre code CSS ici */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

La propriété display: flex définit l'élément #pond comme un conteneur flex, nous permettant d'utiliser le modèle de disposition flex pour positionner les fruits.

La propriété flex-direction: column empile les éléments flex (les conteneurs de fruits) verticalement.

La propriété flex-wrap: wrap permet aux éléments flex de passer à la ligne suivante s'ils ne rentrent pas sur la ligne actuelle.

Le résultat final est le suivant :

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.