Mise en page responsive de dés avec Flexbox

CSSCSSBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce projet, vous allez apprendre à créer une disposition de dés responsive à l'aide de Flexbox CSS. Le but est d'arranger un ensemble de dés avec différents motifs de points, conformément à des exigences de disposition spécifiques.

👀 Aperçu

aperçu de la disposition de dés responsive

🎯 Tâches

Dans ce projet, vous allez apprendre :

  • Comment configurer la structure de base de la disposition de dés à l'aide de HTML et CSS
  • Comment utiliser les propriétés Flexbox telles que justify-content, align-items, flex-direction et align-self pour positionner les points à l'intérieur de chaque dé
  • Comment implémenter des techniques avancées de Flexbox telles que flex-wrap et flex-basis pour créer la disposition souhaitée

🏆 Réalisations

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

  • Utiliser Flexbox pour créer des dispositions complexes et responsives
  • Comprendre les différentes propriétés Flexbox et la manière de les appliquer efficacement
  • Développer des compétences en résolution de problèmes en suivant des instructions étape par étape et en mettant en œuvre la disposition requise

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/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/properties -.-> lab-300064{{"Mise en page responsive de dés avec Flexbox"}} css/box_model -.-> lab-300064{{"Mise en page responsive de dés avec Flexbox"}} css/display_property -.-> lab-300064{{"Mise en page responsive de dés avec Flexbox"}} css/positioning -.-> lab-300064{{"Mise en page responsive de dés avec Flexbox"}} css/flexbox -.-> lab-300064{{"Mise en page responsive de dés avec Flexbox"}} end

Layout Dice 1

Pour commencer, ouvrez l'éditeur. Vous devriez voir un fichier - index.html dans votre éditeur.

Cliquez sur "Go Live" dans le coin inférieur droit pour ouvrir le port 8080 et prévisualiser la page index.html dans le navigateur, l'effet sera le suivant :

aperçu de la disposition de dés inachevée

Dans cette étape, vous allez utiliser les propriétés justify-content et align-items pour positionner les points à l'intérieur du premier dé.

  1. Ouvrez le fichier index.html dans votre éditeur de code.
  2. Dans la section <style>, ajoutez les règles suivantes pour la classe .div1 :
.div1 {
  justify-content: center;
  align-items: center;
}

La propriété justify-content: center centre le point horizontalement, et align-items: center le centre verticalement.

Layout Dice 2

Dans cette étape, vous allez utiliser les propriétés justify-content, flex-direction et align-items pour positionner les points à l'intérieur du second dé.

  1. Dans la section <style>, ajoutez les règles suivantes pour la classe .div2 :
.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

La propriété justify-content: space-around répartit les points régulièrement le long de l'axe principal (horizontalement), flex-direction: column empile les points verticalement, et align-items: center les centre à l'intérieur du dé.

Layout Dice 3

Dans cette étape, vous allez utiliser les propriétés justify-content, align-self et align-items pour positionner les points à l'intérieur du troisième dé.

  1. Dans la section <style>, ajoutez les règles suivantes pour la classe .div3 :
.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

La propriété justify-content: space-around répartit les points régulièrement le long de l'axe principal (horizontalement), align-items: center les centre verticalement, et padding: 10px ajoute un certain espace autour du dé.

La propriété align-self est utilisée pour positionner le premier et le dernier point respectivement en haut et en bas du dé.

Layout Dice 4, 5, 6, 7, and 9

Dans cette étape, vous allez utiliser les propriétés justify-content, align-self, flex-direction et align-items pour positionner les points à l'intérieur des dés restants.

  1. Dans la section <style>, ajoutez les règles suivantes pour la classe .div4 :
.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

La propriété justify-content: space-around répartit les points régulièrement le long de l'axe principal (horizontalement), flex-direction: column empile les points verticalement, et align-items: center les centre à l'intérieur du dé.

Les éléments <div> internes sont utilisés pour regrouper les points horizontalement, avec justify-content: space-around pour les répartir régulièrement. La propriété align-self: center est utilisée pour centrer les points individuels dans leurs rangées respectives.

Layout Dice 8

Dans cette étape finale, vous allez utiliser les propriétés justify-content, align-self, flex-wrap et flex-basis pour positionner les points à l'intérieur du huitième dé.

  1. Dans la section <style>, ajoutez les règles suivantes pour la classe .div8 :
.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

La propriété flex-wrap: wrap permet aux points de passer à la ligne suivante s'ils ne rentrent pas sur une seule ligne. La propriété padding: 2px ajoute un certain espace autour du dé.

Les éléments <div> internes sont utilisés pour regrouper les points horizontalement, avec justify-content: space-between pour les répartir régulièrement et align-items: center pour les centrer verticalement. La propriété flex-basis: 100% assure que chaque ligne occupe toute la largeur du dé.

En suivant ces étapes, vous avez réussi à implémenter le Layout de Dés Flex selon les exigences.

✨ Vérifier la solution et pratiquer

Summary

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