Classes utilitaires pour contrôler la largeur et la hauteur des éléments.
Couvre les valeurs en pourcentage pour la largeur, en viewport pour la hauteur,
les contraintes min-* et max-*,
ainsi que les valeurs fit-content,
max-content et min-content.
Chaque classe dispose d'un équivalent responsive par breakpoint.
.w-25.w-50.w-75.w-100
Les classes de largeur utilisent des valeurs en pourcentage, relatives au conteneur parent.
.w-auto est disponible uniquement en tant que width
— pas en min-w-* ni max-w-*.
| CLASSE | VALEUR | MIN / MAX |
|---|---|---|
.w-0 |
width: 0 |
.min-w-0 / .max-w-0 |
.w-10 |
width: 10% |
.min-w-10 / .max-w-10 |
.w-20 |
width: 20% |
.min-w-20 / .max-w-20 |
.w-25 |
width: 25% |
.min-w-25 / .max-w-25 |
.w-30 |
width: 30% |
.min-w-30 / .max-w-30 |
.w-33 |
width: 33.333% |
.min-w-33 / .max-w-33 |
.w-40 |
width: 40% |
.min-w-40 / .max-w-40 |
.w-50 |
width: 50% |
.min-w-50 / .max-w-50 |
.w-60 |
width: 60% |
.min-w-60 / .max-w-60 |
.w-66 |
width: 66.666% |
.min-w-66 / .max-w-66 |
.w-70 |
width: 70% |
.min-w-70 / .max-w-70 |
.w-75 |
width: 75% |
.min-w-75 / .max-w-75 |
.w-80 |
width: 80% |
.min-w-80 / .max-w-80 |
.w-90 |
width: 90% |
.min-w-90 / .max-w-90 |
.w-100 |
width: 100% |
.min-w-100 / .max-w-100 |
.w-auto |
width: auto |
— |
Les classes de hauteur utilisent des valeurs en vh (viewport height),
relatives à la hauteur de la fenêtre du navigateur.
Toutes les valeurs sont disponibles en min-h-* et max-h-*.
| CLASSE | VALEUR | MIN / MAX |
|---|---|---|
.h-0 |
height: 0 |
.min-h-0 / .max-h-0 |
.h-10 |
height: 10vh |
.min-h-10 / .max-h-10 |
.h-20 |
height: 20vh |
.min-h-20 / .max-h-20 |
.h-25 |
height: 25vh |
.min-h-25 / .max-h-25 |
.h-30 |
height: 30vh |
.min-h-30 / .max-h-30 |
.h-40 |
height: 40vh |
.min-h-40 / .max-h-40 |
.h-50 |
height: 50vh |
.min-h-50 / .max-h-50 |
.h-60 |
height: 60vh |
.min-h-60 / .max-h-60 |
.h-70 |
height: 70vh |
.min-h-70 / .max-h-70 |
.h-75 |
height: 75vh |
.min-h-75 / .max-h-75 |
.h-80 |
height: 80vh |
.min-h-80 / .max-h-80 |
.h-90 |
height: 90vh |
.min-h-90 / .max-h-90 |
.h-100 |
height: 100vh |
.min-h-100 / .max-h-100 |
Contrairement aux largeurs qui utilisent % (relatif au parent),
les hauteurs utilisent vh (relatif à la fenêtre du navigateur).
.h-100 occupe donc toujours 100% de la hauteur du viewport,
quel que soit le parent.
Classes utilitaires pour les valeurs de dimensionnement intrinsèque : fit-content,
max-content et min-content.
Disponibles en largeur seule, hauteur seule, ou les deux simultanément.
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.fit-width |
width: fit-content |
La largeur s'adapte au contenu, sans dépasser le conteneur. |
.fit-height |
height: fit-content |
La hauteur s'adapte au contenu, sans dépasser le conteneur. |
.fit-size |
width: fit-content; height: fit-content |
Applique fit-content sur les deux axes simultanément. |
.fit-max-width |
width: max-content |
La largeur correspond à la taille maximale intrinsèque du contenu, sans retour à la ligne. |
.fit-max-height |
height: max-content |
La hauteur correspond à la taille maximale intrinsèque du contenu. |
.fit-max-size |
width: max-content; height: max-content |
Applique max-content sur les deux axes simultanément. |
.fit-min-width |
width: min-content |
La largeur correspond à la taille minimale intrinsèque du contenu (le mot le plus long). |
.fit-min-height |
height: min-content |
La hauteur correspond à la taille minimale intrinsèque du contenu. |
.fit-min-size |
width: min-content; height: min-content |
Applique min-content sur les deux axes simultanément. |
Toutes les classes de sizing et de fit disposent d'un équivalent responsive suffixé par le nom du breakpoint.
La classe s'applique à partir du breakpoint spécifié (min-width).
Les suffixes disponibles correspondent aux clés définies dans
$breakpoints de
abstracts/breakpoints.
Chaque suffixe génère une règle @media (min-width: ...) dédiée.
La classe .w-auto-{bp} est disponible en responsive,
mais pas .min-w-auto-{bp} ni .max-w-auto-{bp}.
Utiliser .max-w-100 pour empêcher un élément
de dépasser la largeur de son conteneur, sans lui imposer une largeur fixe.
Combiner .w-100 et
.w-50-md pour un élément
pleine largeur sur mobile qui passe à demi-largeur à partir d'un breakpoint.
Ne pas utiliser .h-100 en espérant occuper 100%
du parent : la valeur est 100vh, pas 100%.
Pour une hauteur relative au parent, une surcharge CSS directe est nécessaire.
Sizing · WEBDEV-UI DOCS / V1