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
course content

Contenu du cours

Tailwind CSS pour le Développement Web

Tailwind CSS pour le Développement Web

1. Introduction et Configuration
Qu'est-ce Que Tailwind CSS ?À Qui S'adresse le Cours ?Méthodes d'InstallationQuiz
2. Concepts de Base et Style de Base
Comprendre les Classes UtilitairesApplication des Classes UtilitairesStylisation de Base - CouleursStylisation de Base - BorduresStyle de Base - OmbresDéfi : Style de BaseUtilitaires de TypographieDéfi : Application des Utilitaires de Typographie
3. Construction de Composants de Base
BoutonsDéfi : BoutonsCartesDéfi : CartesFormulairesDéfi : Formulaires
4. Notions de Base en Mise en Page
Utilitaires d'EspacementDéfi : Utilitaires d'EspacementUtilitaires FlexboxDéfi : Utilitaires FlexboxUtilitaires de GrilleDéfi : Utilitaires de Grille
5. Réactivité et Personnalisation
Conception RéactiveDéfi : Conception RéactiveModifier le Thème par DéfautConclusion et Prochaines Étapes

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

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.

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
ChatGPT

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

course content

Contenu du cours

Tailwind CSS pour le Développement Web

Tailwind CSS pour le Développement Web

1. Introduction et Configuration
Qu'est-ce Que Tailwind CSS ?À Qui S'adresse le Cours ?Méthodes d'InstallationQuiz
2. Concepts de Base et Style de Base
Comprendre les Classes UtilitairesApplication des Classes UtilitairesStylisation de Base - CouleursStylisation de Base - BorduresStyle de Base - OmbresDéfi : Style de BaseUtilitaires de TypographieDéfi : Application des Utilitaires de Typographie
3. Construction de Composants de Base
BoutonsDéfi : BoutonsCartesDéfi : CartesFormulairesDéfi : Formulaires
4. Notions de Base en Mise en Page
Utilitaires d'EspacementDéfi : Utilitaires d'EspacementUtilitaires FlexboxDéfi : Utilitaires FlexboxUtilitaires de GrilleDéfi : Utilitaires de Grille
5. Réactivité et Personnalisation
Conception RéactiveDéfi : Conception RéactiveModifier le Thème par DéfautConclusion et Prochaines Étapes

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

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.

html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4
Nous sommes désolés de vous informer que quelque chose s'est mal passé. Qu'est-il arrivé ?
some-alt