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
|
---
title: min-width
slug: Web/CSS/min-width
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/min-width
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>min-width</code></strong> est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par <code>min-width</code> (autrement dit, <code>min-width</code> est une borne inférieure pour <code>width</code>).</p>
<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à 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> !</p>
<p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeur de longueur */
/* Type <length> */
min-width: 3.5em;
/* Valeurs relatives */
/* Type <percentage> */
min-width: 10%;
/* Valeurs avec un mot-clé */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Valeurs globales */
min-width: inherit;
min-width: initial;
min-width: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>La largeur minimale. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
<dt><code><percentage></code></dt>
<dd>La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
<dt><code>auto</code></dt>
<dd>Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..</dd>
<dt><code>max-content</code> {{experimental_inline}}</dt>
<dd>La largeur intrinsèque préférée.</dd>
<dt><code>min-content</code> {{experimental_inline}}</dt>
<dd>La largeur intrinsèque minimale.</dd>
<dt><code>fill-available</code>{{experimental_inline}}</dt>
<dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
<dt><code>fit-content</code> {{experimental_inline}}</dt>
<dd>La largeur calculée par <code>min(max-content, max(min-content, fill-available))</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div> Lorem ipsum tralala sit amet, consectetur adipisicing
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Ajout du mot-clé <code>auto</code> qui est utilisé comme valeur initiale.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>min-width</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
<p>{{Compat("css.properties.min-width")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("width")}}</li>
<li>{{cssxref("max-width")}}</li>
<li>{{cssxref("min-height")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
</ul>
|
