🏆 Challenge #N7 · Flex HTML · challenges/N7_flex.html CSS · challenges/css/N7_flex.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

display: flex; // Défini le mode d'affichage en flex


flex-direction: row | column; // Défini l'orientation de l'alignement
flex-wrap: wrap | no-wrap; // Défini si le contenu doit retourner à la ligne si il n'y a plus de place


justify-content: flex-start | center | flex-end | space-between | space-around; // Défini l'alignement sur l'axe horizontal ou vertical selon la flex-direction
align-items: flex-start | center | flex-end | stretch; // Défini l'alignement sur l'axe horizontal ou vertical selon la flex-direction

1️⃣ Définissez la structure et l'alignement

Reproduisez le résultat attendu en créant les boîtes, en les stylisant, et en définissant les alignements avec le flex pour arriver au résultat attendu.

🎯 Résultat attendu

Résultat attendu