files/fr/web/css/minmax()/index.html


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
152
153
154
155
156
157

---
title: minmax()
slug: Web/CSS/minmax()
tags:
  - CSS
  - CSS Function
  - CSS Grid
  - Function
  - Layout
  - Reference
  - Web
translation_of: Web/CSS/minmax()
---
<div>{{CSSRef}}</div>

<p>La <a href="/fr/docs/Web/CSS/CSS_Functions">fonction CSS</a> <strong><code>minmax()</code></strong> définit un intervalle de taille supérieure ou égale à <var>min</var> et inférieure ou égale à <var>max</var>. Elle est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p>

<div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div>

<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>

<h2 id="Syntax">Syntaxe</h2>

<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;inflexible-breadth&gt;, &lt;track-breadth&gt;*/
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 de type &lt;fixed-breadth&gt;, &lt;track-breadth&gt; */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* Valeurs de type &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
</pre>

<p><code>minmax()</code> est une fonction qui prend deux paramètres, <em>min</em> et <em>max</em>.</p>

<p>Chaque paramètre peut être une longueur (type <code>&lt;length&gt;</code>), un pourcentage (type <code>&lt;percentage&gt;</code>), une valeur de type <code>&lt;flex&gt;</code> ou l'un des mots-clés <code>max-content</code>, <code>min-content</code>, ou <code>auto</code>.</p>

<p>Si <var>max</var> est supérieur à <var>min</var>, alors <var>max</var> sera ignoré et <code>minmax(min,max)</code> sera considéré comme <var>min</var>. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","&lt;flex&gt;")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum.</p>

<h3 id="Values">Valeurs</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Une longueur non-négative.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (<i>inline</i>) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur <code>&lt;percentage&gt;</code> sera traitée comme <code>auto</code>. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage.</dd>
 <dt>{{cssxref("&lt;flex&gt;")}}</dt>
 <dd>Une valeur non-négative avec l'unité <code>fr</code> qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type <code>&lt;flex&gt;</code> occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité.</dd>
 <dt><code>max-content</code></dt>
 <dd>Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste.</dd>
 <dt><code>min-content</code></dt>
 <dd>Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste.</dd>
 <dt><code>auto</code></dt>
 <dd>Utilisée comme maximum, cette valeur agira comme <code>max-content</code>. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd>
</dl>

<h3 id="Formal_syntax">Syntaxe formelle</h3>

{{csssyntax}}

<h3 id="CSS_properties">Propriétés CSS associées</h3>

<p><code>minmax()</code> peut être utilisée pour les propriétés suivantes :</p>

<ul>
 <li><a href="/fr/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
 <li><a href="/fr/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
 <li><a href="/fr/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
 <li><a href="/fr/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
</ul>

<h2 id="Examples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[3]">#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 &gt; div {
  background-color: #8ca0ff;
  padding: 5px;
}
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="container"&gt;
  &lt;div&gt;
    Aussi large que le contenu, large d'au plus 300 pixels.
  &lt;/div&gt;
  &lt;div&gt;
    Item flexible mais dont la largeur vaut au moins 200 pixels.
  &lt;/div&gt;
  &lt;div&gt;
    Item avec une largeur de 150 pixels.
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="Result">Résultat</h3>

<p>{{EmbedLiveSample("Examples", "100%", 200)}}</p>

<h2 id="Specifications">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="Browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>

<h2 id="See_also">Voir aussi</h2>

<ul>
 <li>Guide sur les grilles CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#track_sizing_and_minmax()">Concepts de bases pour le dimensionnement des pistes avec minmax()</a></em></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Valeurs logiques, modes d'écriture et grilles CSS</a></li>
 <li>Tutoriel vidéo (en anglais) : <a href="http://gridbyexample.com/video/series-minmax/">Introduction à minmax()</a>
 </li>
</ul>