<flex>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
Le type de donnée CSS <flex> permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité fr. Il est notamment utilisé pour les propriétés grid-template-columns, grid-template-rows ainsi que d'autres.
Syntaxe
Le type de donnée <flex> est défini par un nombre (<number> suivi de l'unité fr. L'unité fr représente une fraction de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.
Exemples
Exemples de valeurs correctes pour le type de donnée fr
1fr /* Utilisation d'une valeur entière */ 2.5fr /* Utilisation d'une valeur flottante */
Exemple d'utilisation dans une liste de pistes pour la mise en page en grille CSS
css
.grid {
display: grid;
grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
Spécifications
| Specification |
|---|
| CSS Grid Layout Module Level 2 # fr-unit |