Conception de la mise en page des légumes avec Flexbox

Introduction

Dans ce projet, vous allez apprendre à utiliser les propriétés CSS Flexbox pour organiser une mise en page de légumes frais dans un design spécifique. À la fin de ce projet, vous serez capable de créer une mise en page visuellement attrayante à l'aide de Flexbox, qui est un outil puissant pour créer des designs web réactifs et dynamiques.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la mise en page à l'aide des propriétés CSS Flexbox
• Comment disposer les légumes dans les positions souhaitées dans la mise en page
• Comment utiliser les propriétés Flexbox telles que display, justify-content, align-items et align-self pour obtenir la mise en page souhaitée

🏆 Réalisations

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

• Créer une mise en page visuellement attrayante à l'aide de Flexbox, un outil puissant pour créer des designs web réactifs et dynamiques
• Comprendre comment utiliser les propriétés CSS Flexbox pour créer une mise en page flexible et réactive
• Appliquer des techniques pour aligner et distribuer des éléments dans un conteneur Flexbox
• Mettre en œuvre des stratégies pour positionner des éléments dans une mise en page Flexbox pour obtenir un design spécifique

Configurer le projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le dossier du projet, qui contient les fichiers et les dossiers suivants :

   • css/style.css
   • index.html

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

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

Configurer la mise en page

Dans cette étape, vous allez apprendre à utiliser les propriétés CSS Flexbox pour configurer la mise en page de l'arrangement de légumes.

1. Ouvrez le fichier style.css dans votre éditeur.

2. Dans le sélecteur #box1, ajoutez les propriétés CSS suivantes :

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

   Cela centrera le contenu horizontalement et verticalement à l'intérieur du conteneur #box1.

3. Dans le sélecteur #box2, ajoutez les propriétés CSS suivantes :

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

   Cela distribuera les éléments dans le conteneur #box2 de manière uniforme avec un espace entre eux.

4. Dans le sélecteur #box2.item:nth-child(2), ajoutez la propriété CSS suivante :

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

   Cela alignera le deuxième élément dans #box2 au bas du conteneur.

Organiser les légumes

Dans cette étape, vous allez apprendre à utiliser les propriétés CSS Flexbox pour disposer les légumes dans les positions souhaitées.

1. Dans le sélecteur #box3, ajoutez les propriétés CSS suivantes :

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

   Cela créera une mise en page en ligne pour les éléments dans #box3 et les distribuera régulièrement avec un espace entre eux.

2. Dans le sélecteur #box3.item:nth-child(2), ajoutez la propriété CSS suivante :

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

   Cela alignera le deuxième élément dans #box3 au centre du conteneur.

3. Dans le sélecteur #box3.item:nth-child(3), ajoutez la propriété CSS suivante :

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

   Cela alignera le troisième élément dans #box3 au bas du conteneur.

Après avoir effectué ces étapes, votre fichier style.css devrait correspondre à la solution fournie, et la mise en page des légumes devrait correspondre à l'exemple terminé.

Le résultat final est le suivant :

Résumé

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