Mise en page responsive de dés | Tutoriel Flexbox CSS

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

Mise en page du dé 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é.

Ouvrez le fichier index.html dans votre éditeur de code.
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.

Mise en page du dé 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é.

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

Mise en page du dé 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é.

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

Mise en page des dés 4, 5, 6, 7 et 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.

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;
}

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.

Mise en page du dé 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é.

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.