La propriété flex-wrap 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.
| Valeur initiale | nowrap |
|---|---|
| Applicabilité | conteneurs flexibles |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
Syntaxe
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; /* Valeurs globales */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
Valeurs
Les valeurs suivantes sont acceptées :
nowrap- Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne cross-start est équivalente à start ou à before selon la valeur de
flex-direction. wrap- Les éléments flexibles sont disposé sur plusieurs lignes. La ligne cross-start est équivalente à start ou before en fonction de la valeur de
flex-directionet la ligne cross-end est à l'opposée cross-start. wrap-reverse- Se comporte comme
wrapmais cross-start et cross-end sont permutées. -
Syntaxe formelle
nowrap | wrap | wrap-reverse
Exemples
HTML
<h4>Un exemple de flex-wrap:wrap </h4> <div class="contenu0"> <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>
CSS
.contenu0 {
height: 150px;
font: 100 24px/100px sans-serif;
text-align: center;
color: white;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.contenu1 {
height: 150px;
font: 100 24px/100px sans-serif;
text-align: center;
color: white;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
}
.contenu2 {
height: 150px;
font: 100 24px/100px sans-serif;
text-align: center;
color: white;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap-reverse;
}
.contenu0 div {
height: 50%;
width: 50%;
}
.contenu1 div {
height: 50%;
width: 50%;
}
.contenu2 div {
height: 50%;
width: 50%;
}
.rouge {
background: orangered;
}
.vert {
background: yellowgreen;
}
.bleu {
background: steelblue;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Flexible Box Layout Module La définition de 'flex-wrap' dans cette spécification. |
Candidat au statut de recommandation |
Compatibilité des navigateurs
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 28.0[1] | 21.0-webkit | 11.0-ms | 12.10 | 6.1-webkit |
| Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 28.0[1] | 4.4 | 11.0 | 12.10 | 7.0-webkit |
[1] En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.
