1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: minmax()
slug: Web/CSS/minmax()
tags:
- CSS
- Experimental
- Fonction
- Reference
- Web
translation_of: Web/CSS/minmax()
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La fonction CSS <code><strong>minmax</strong></code><strong><code>()</code></strong> définit un intervalle de taille compris (au sens large) entre <var>min</var> et <var>max</var>. Cette fonction est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers notranslate">/* Valeurs <inflexible-breadth>, <track-breadth> */
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)
/* Valeurs <fixed-breadth>, <track-breadth> */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)
/* Valeurs <inflexible-breadth>, <fixed-breadth> */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
</pre>
<p>Une fonction qui prend en entrée deux arguments : <em>min</em> et <em>max</em>.</p>
<p>Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi <code>max-content</code>, <code>min-content</code> ou <code>auto</code>.</p>
<p>Si <var>max</var> < <var>min</var>, <var>max</var> est ignoré et <code>minmax(min,max)</code> correspond à <var>min</var>. Utilisé comme maximum, une valeur {{cssxref("flex_value","<flex>")}} permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>Une longueur positive (cf. le type {{cssxref("<length>")}}).</dd>
<dt><code><percentage></code></dt>
<dd>Un pourcentage ({{cssxref("<percentage>")}}) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme <code>auto</code>. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.</dd>
<dt><code><flex></code></dt>
<dd>Une dimension positive avec l'unité <code>fr</code> qui définit le facteur de flexibilité de la piste (cf. {{cssxref("<flex>")}}). Chaque piste avec un tel coefficient <code><flex></code> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.</dd>
<dt><code>max-content</code></dt>
<dd>Cette valeur représente la plus grande valeur <code>max-content</code> contribuant aux objets de la grille qui occupent la piste.</dd>
<dt><code>min-content</code></dt>
<dd>Cette valeur représente la plus grande valeur <code>min-content</code> contribuant aux objets de la grille qui occupent la piste</dd>
<dt><code>auto</code></dt>
<dd>Utilisé comme maximum, c'est un synonyme de <code>max-content</code>. Utilisé comme un minimum, il représente le plus grand des minima (selon {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h3 id="Propriétés_CSS_applicables">Propriétés CSS applicables</h3>
<p>La fonction <code>minmax()</code> peut être utilisée avec les propriétés suivantes :</p>
<ul>
<li>{{cssxref("grid-template-columns")}}</li>
<li>{{cssxref("grid-template-rows")}}</li>
<li>{{cssxref("grid-auto-columns")}}</li>
<li>{{cssxref("grid-auto-rows")}}</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[3] notranslate">#container {
display: grid;
grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div id="container">
<div>
Item aussi large que le contenu jusqu'à 300 pixels max.
</div>
<div>
Item avec une largeur flexible minimale de 200 pixels.
</div>
<div>
Item inflexible de 150 pixels de large.
</div>
</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
<td>{{Spec2("CSS Grid")}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="http://gridbyexample.com/video/series-minmax/">Un tutoriel vidéo : Introduction à <code>minmax()</code> (en anglais)</a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS : les valeurs logiques et les modes d'écriture</a></li>
</ul>
|
