Contenu du cours
Tailwind CSS pour le Développement Web
Tailwind CSS pour le Développement Web
Utilitaires Flexbox
Tailwind CSS fournit des classes utilitaires qui vous permettent de créer facilement des mises en page flexibles et réactives en utilisant Flexbox. Ces utilitaires vous permettent de contrôler la conception et l'alignement des éléments à l'intérieur d'un conteneur.
Définir l'affichage sur Flex
Pour définir un élément pour utiliser Flexbox pour sa mise en page, vous pouvez utiliser la classe flex. Cette classe définit la propriété display sur flex.
index.html
Dans cet exemple, la classe flex sur le div parent en fait un conteneur flex, et les div enfants (flex-1) distribueront l'espace de manière égale.
Contrôler la Direction Flex
Les utilitaires de direction flex vous permettent de contrôler la direction dans laquelle les éléments flex sont placés dans le conteneur. Vous pouvez définir la direction sur row (par défaut), column, row-reverse ou column-reverse en utilisant les classes suivantes :
| Classe | Description |
|---|---|
flex-row | Place les éléments en ligne (par défaut). |
flex-col | Place les éléments en colonne. |
flex-row-reverse | Place les éléments dans une ligne inversée. |
flex-col-reverse | Place les éléments dans une colonne inversée. |
index.html
Dans cet exemple, la classe flex-col définit la direction du flex en colonne, empilant les éléments verticalement.
Alignement des éléments horizontalement
Les utilitaires justify-content contrôlent l'alignement horizontal des éléments à l'intérieur d'un conteneur flex. Les classes disponibles sont :
| Classe | Description |
|---|---|
justify-start | Aligne les éléments au début. |
justify-center | Aligne les éléments au centre. |
justify-end | Aligne les éléments à la fin. |
justify-between | Distribue les éléments uniformément avec un espace entre eux. |
justify-around | Distribue les éléments uniformément avec un espace autour d'eux. |
justify-evenly | Distribue les éléments uniformément avec un espace égal autour d'eux. |
index.html
Dans cet exemple, la classe justify-center centre les éléments horizontalement à l'intérieur du conteneur flex.
Alignement des éléments verticalement
Les utilitaires align-items contrôlent l'alignement vertical des éléments à l'intérieur d'un conteneur flex. Les classes disponibles sont :
| Classe | Description |
|---|---|
items-start | Aligne les éléments au début. |
items-center | Aligne les éléments au centre. |
items-end | Aligne les éléments à la fin. |
items-baseline | Aligne les éléments le long de leur ligne de base. |
items-stretch | Étire les éléments pour remplir le conteneur (par défaut). |
index.html
Dans cet exemple, la classe items-center centre verticalement les éléments à l'intérieur du conteneur flex.
Remarque
Si vous recherchez quelque chose de spécifique, veuillez suivre le lien.
1. Quelle classe définit la propriété display sur flex ?
2. Comment définir la direction flex sur colonne ?
3. Quelle classe centre horizontalement les éléments dans un conteneur flex ?
4. Quelle classe utilitaire centre verticalement les éléments dans un conteneur flex ?
Merci pour vos commentaires !
