Mise en page responsive de dés avec Flexbox

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

🎯 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

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 :

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.

Summary

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