Voici la liste des boites flexibles et grilles proposé par Tailwind CSS :
| Nom | Description |
|---|---|
| align-content | Aligne les lignes de contenu dans un conteneur flex ou grille lorsque l'espace supplémentaire est disponible, affectant l'ensemble du groupe d'éléments. |
| align-items | Aligne les éléments le long de l'axe transversal dans un conteneur flex ou grille, contrôlant leur position verticale ou horizontale. |
| align-self | Permet à un élément unique de s'aligner le long de l'axe transversal, en contournant l'alignement défini par align-items. |
| flex | Propriété raccourcie combinant flex-grow, flex-shrink et flex-basis pour simplifier la configuration d'un élément flexible. |
| flex-basis | Définit la taille initiale d'un élément flexible avant que l'espace restant ne soit distribué, contrôlant sa largeur ou hauteur dans le conteneur flex. |
| flex-direction | Détermine l'orientation principale des éléments dans un conteneur flex (ligne, colonne, ligne inversée, colonne inversée). |
| flex-grow | Spécifie la proportion de l'espace disponible qu'un élément flexible peut occuper par rapport aux autres éléments dans le conteneur. |
| flex-shrink | Définit la capacité d'un élément flexible à rétrécir lorsque l'espace disponible devient insuffisant dans le conteneur. |
| flex-wrap | Contrôle si les éléments flexibles passent à la ligne suivante lorsque l'espace disponible est insuffisant ou restent sur une seule ligne. |
| gap | Définit l'espacement entre les lignes et colonnes dans un conteneur flex ou grille, simplifiant le contrôle des marges internes. |
| grid-template-columns | Définit le nombre et la taille des colonnes dans une grille CSS, permettant de créer des dispositions complexes. |
| grid-column | Permet à un élément de s'étendre sur plusieurs colonnes ou de se placer à une colonne spécifique dans la grille. |
| grid-template-rows | Définit le nombre et la taille des lignes dans une grille CSS, organisant verticalement les éléments. |
| grid-row | Permet à un élément de s'étendre sur plusieurs lignes ou de se placer à une ligne spécifique dans la grille. |
| grid-auto-flow | Contrôle la direction et la manière dont les éléments sont ajoutés automatiquement dans la grille lorsqu'ils dépassent les lignes ou colonnes définies. |
| grid-auto-columns | Définit la taille par défaut des colonnes générées automatiquement lorsque de nouveaux éléments sont ajoutés à la grille. |
| grid-auto-rows | Définit la taille par défaut des lignes générées automatiquement lorsque de nouveaux éléments sont ajoutés à la grille. |
| justify-content | Aligne les éléments le long de l'axe principal d'un conteneur flex ou grille, contrôlant la distribution horizontale ou verticale. |
| justify-items | Aligne les éléments individuels le long de l'axe inline dans leur cellule de grille ou conteneur flex. |
| justify-self | Permet à un élément unique de s'aligner le long de l'axe inline dans sa cellule de grille, indépendamment des autres éléments. |
| order | Détermine l'ordre d'affichage des éléments flexibles ou de grille, indépendamment de leur position dans le HTML. |
| place-content | Raccourci combinant align-content et justify-content, permettant de gérer facilement l'alignement global du contenu dans le conteneur. |
| place-items | Raccourci combinant align-items et justify-items, permettant d'aligner rapidement tous les éléments dans leurs cellules respectives. |
| place-self | Raccourci combinant align-self et justify-self, pour aligner individuellement un élément dans sa cellule de manière simple et concise. |