Fonction minmax() CSS
Exemple
Définir les dimensions minimale et maximale d'un élément :
#container {
display: grid;
grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Essayez-le vous-même »
Définition et utilisation
La fonction minmax() définit un intervalle fermé de plage de longueur et de largeur, qui, avec CSSGrid layoutest utilisé conjointement.
Version prise en charge : CSS3
Prise en charge des navigateurs
Les nombres du tableau représentent le premier numéro de version de navigateur prenant en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
Syntaxe CSS
/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px)
| Valeur | Description |
|---|---|
| longueur | Longueur non négative. |
| pourcentage | Un pourcentage non négatif relatif à la taille en ligne du conteneur de grille dans les pistes de grille de colonne et à la taille de bloc du conteneur de grille dans les pistes de grille de ligne. Si la taille du conteneur de grille dépend de la taille de ses pistes, alors le pourcentage doit être traité comme auto. L'agent utilisateur (user-agent) peut ajuster la contribution de taille intrinsèque de la piste à la taille du conteneur de grille, en augmentant la taille finale de la piste à la quantité minimale nécessaire pour respecter le pourcentage. |
| flex | Une taille non négative avec l'unité fr spécifie le facteur de flex de la piste. Toute piste dimensionnée avec flex distribuera l'espace restant proportionnellement en fonction de son facteur de flex. |
| max-content | Indique que la longueur de la piste de grille s'adapte à la cellule ayant le contenu le plus grand. |
| min-content | Indique que la longueur de la piste de grille s'adapte à la cellule ayant le plus petit contenu. |
| auto | Au maximum, elle équivaut à max-content. Au minimum, elle représente le maximum des tailles minimales des éléments de grille occupant la piste de grille (comme spécifié par min-width/min-height). |
autres extensions