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
158
|
---
title: flex-wrap
slug: Web/CSS/flex-wrap
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/flex-wrap
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>flex-wrap</code></strong> indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.</p>
<div>{{EmbedInteractiveExample("pages/css/flex-wrap.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>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
flex-wrap: nowrap; /* Valeur par défaut */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Valeurs globales */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
</pre>
<p>La propriété <code>flex-wrap</code> peut être défini grâce à l'un des mots-clés suivants.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>nowrap</code></dt>
<dd>Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou à <strong>before</strong> selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.</dd>
<dt><code>wrap</code></dt>
<dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd>
<dt><code>wrap-reverse</code></dt>
<dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd>
<dt>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
</dt>
</dl>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<div id="Live_Sample">
<pre class="brush: html"><h4>Un exemple de flex-wrap:wrap </h4>
<div class="contenu">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
<h4>Un exemple de flex-wrap:nowrap </h4>
<div class="contenu1">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
<h4>Un exemple de flex-wrap:wrap-reverse </h4>
<div class="contenu2">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.contenu,
.contenu1,
.contenu2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
text-align: center;
}
.contenu div,
.contenu1 div,
.contenu2 div {
height: 50%;
width: 300px;
}
.rouge {
background: orangered;
}
.vert {
background: yellowgreen;
}
.bleu {
background: steelblue;
}
/* Styles pour les boîtes flexibles*/
.contenu {
display: flex;
flex-wrap: wrap;
}
.contenu1 {
display: flex;
flex-wrap: nowrap;
}
.contenu2 {
display: flex;
flex-wrap: wrap-reverse;
}
</pre>
</div>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}</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('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<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.flex-wrap")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
<li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li>
</ul>
|
