Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Utilitaires Flexbox | Notions de Base en Mise en Page
Tailwind CSS pour le Développement Web

bookDéfi : Utilitaires Flexbox

Tâche

Complétez la structure HTML fournie en remplissant les classes Tailwind CSS manquantes selon les exigences de mise en page.

  • Div parent : Définissez l'affichage sur flex et disposez les éléments en colonne ;
  • Divs enfants : Centrez les éléments horizontalement et verticalement dans le conteneur.
index.html

index.html

copy

Pour le div parent,

  • Utilisez flex pour définir un élément afin d'utiliser Flexbox pour sa mise en page;
  • Utilisez flex-col pour placer les éléments en colonne;
  • Utilisez items-center pour aligner les éléments au centre;
  • Utilisez justify-center pour aligner les éléments au centre.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 3.57

bookDéfi : Utilitaires Flexbox

Glissez pour afficher le menu

Tâche

Complétez la structure HTML fournie en remplissant les classes Tailwind CSS manquantes selon les exigences de mise en page.

  • Div parent : Définissez l'affichage sur flex et disposez les éléments en colonne ;
  • Divs enfants : Centrez les éléments horizontalement et verticalement dans le conteneur.
index.html

index.html

copy

Pour le div parent,

  • Utilisez flex pour définir un élément afin d'utiliser Flexbox pour sa mise en page;
  • Utilisez flex-col pour placer les éléments en colonne;
  • Utilisez items-center pour aligner les éléments au centre;
  • Utilisez justify-center pour aligner les éléments au centre.
index.html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4
some-alt