Tutoriel d'agencement de fruits avec CSS Flexbox | Conception de disposition responsive

Introduction

Dans ce projet, vous allez apprendre à utiliser CSS Flexbox pour créer une disposition d'agencement de fruits. Vous allez apprendre à utiliser les propriétés align-self et order pour positionner et agencer les fruits dans les bols.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la structure HTML pour l'agencement de fruits
Comment utiliser la propriété align-self pour aligner individuellement les éléments flexibles le long de l'axe transversal
Comment utiliser la propriété order pour changer l'ordre des éléments flexibles
Comment agencer les fruits dans la disposition souhaitée à l'aide de Flexbox

🏆 Réalisations

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

Utiliser CSS Flexbox pour créer une disposition réactive et visuellement attrayante
Appliquer les propriétés align-self et order pour contrôler le positionnement et l'agencement des éléments
Travailler avec les sélecteurs et les propriétés CSS pour atteindre la conception souhaitée

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core 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-300076{{"Agencement de fruits avec CSS Flexbox"}} css/box_model -.-> lab-300076{{"Agencement de fruits avec CSS Flexbox"}} css/width_and_height -.-> lab-300076{{"Agencement de fruits avec CSS Flexbox"}} css/display_property -.-> lab-300076{{"Agencement de fruits avec CSS Flexbox"}} css/flexbox -.-> lab-300076{{"Agencement de fruits avec CSS Flexbox"}} end

Configure 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.

Stylisez l'agencement de fruits

Dans cette étape, vous allez apprendre à utiliser les propriétés align - self et order pour styliser l'agencement de fruits. Suivez les étapes ci - dessous pour terminer cette étape :

Ouvrez le fichier index.css dans votre éditeur.
Ciblez la classe .yellow et définissez la propriété align - self sur flex - end.
Définissez la propriété order de la classe .yellow sur 1.

Votre fichier index.css devrait maintenant ressembler à ceci :

.yellow {
  align - self: flex - end;
  order: 1;
}

La propriété align - self est utilisée pour aligner individuellement les éléments flexibles le long de l'axe transversal, en remplaçant la valeur de align - items. Dans ce cas, nous la définissons sur flex - end pour aligner le fruit jaune au fond du bol.

La propriété order est utilisée pour changer l'ordre des éléments flexibles. Nous la définissons sur 1 pour le fruit jaune, ce qui le placera à la fin du conteneur flex.

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 dans LabEx pour améliorer vos compétences.