diff options
Diffstat (limited to 'files/fr/web/css/minmax()/index.md')
| -rw-r--r-- | files/fr/web/css/minmax()/index.md | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/fr/web/css/minmax()/index.md b/files/fr/web/css/minmax()/index.md new file mode 100644 index 0000000000..5ca7fb623d --- /dev/null +++ b/files/fr/web/css/minmax()/index.md @@ -0,0 +1,155 @@ +--- +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> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valeurs de type <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 de type <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 de type <inflexible-breadth>, <fixed-breadth> */ +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><length></code>), un pourcentage (type <code><percentage></code>), une valeur de type <code><flex></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","<flex>")}} 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("<length>")}}</dt> + <dd>Une longueur non-négative.</dd> + <dt>{{cssxref("<percentage>")}}</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><percentage></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("<flex>")}}</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><flex></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">#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"><div id="container"> + <div> + Aussi large que le contenu, large d'au plus 300 pixels. + </div> + <div> + Item flexible mais dont la largeur vaut au moins 200 pixels. + </div> + <div> + Item avec une largeur de 150 pixels. + </div> +</div></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> |