Contrôle de la Mise en Page avec les Utilitaires Flexbox
Tailwind CSS propose des classes utilitaires permettant de créer facilement des mises en page flexibles et réactives à l'aide de Flexbox. Ces utilitaires offrent un contrôle sur la disposition et l'alignement des éléments à l'intérieur d'un conteneur.
Définition de l'affichage en Flex
Pour appliquer Flexbox à un élément, utiliser la classe flex. Cette classe définit la propriété display sur flex.
index.html
Dans cet exemple, la classe flex appliquée au div parent le transforme en conteneur flex, et les div enfants (flex-1) répartissent l'espace de manière égale.
Contrôle de la direction du flex
Les utilitaires de direction flex permettent de contrôler l'orientation des éléments flex dans le conteneur. Il est possible de définir la direction sur row (par défaut), column, row-reverse ou column-reverse à l'aide des classes suivantes :
| Class | 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 en ligne inversée. |
flex-col-reverse | Place les éléments en 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 horizontal des éléments
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 | Répartit les éléments uniformément avec un espace entre eux. |
justify-around | Répartit les éléments uniformément avec un espace autour d’eux. |
justify-evenly | Répartit les éléments uniformément avec un espace égal autour. |
index.html
Dans cet exemple, la classe justify-center centre les éléments horizontalement à l'intérieur du conteneur flex.
Alignement vertical des éléments
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 selon 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 du flex en 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 !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.57Contrôle de la Mise en Page avec les Utilitaires Flexbox
Glissez pour afficher le menu
Tailwind CSS propose des classes utilitaires permettant de créer facilement des mises en page flexibles et réactives à l'aide de Flexbox. Ces utilitaires offrent un contrôle sur la disposition et l'alignement des éléments à l'intérieur d'un conteneur.
Définition de l'affichage en Flex
Pour appliquer Flexbox à un élément, utiliser la classe flex. Cette classe définit la propriété display sur flex.
index.html
Dans cet exemple, la classe flex appliquée au div parent le transforme en conteneur flex, et les div enfants (flex-1) répartissent l'espace de manière égale.
Contrôle de la direction du flex
Les utilitaires de direction flex permettent de contrôler l'orientation des éléments flex dans le conteneur. Il est possible de définir la direction sur row (par défaut), column, row-reverse ou column-reverse à l'aide des classes suivantes :
| Class | 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 en ligne inversée. |
flex-col-reverse | Place les éléments en 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 horizontal des éléments
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 | Répartit les éléments uniformément avec un espace entre eux. |
justify-around | Répartit les éléments uniformément avec un espace autour d’eux. |
justify-evenly | Répartit les éléments uniformément avec un espace égal autour. |
index.html
Dans cet exemple, la classe justify-center centre les éléments horizontalement à l'intérieur du conteneur flex.
Alignement vertical des éléments
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 selon 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 du flex en 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 !
