flex-wrap

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.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Valeurs globales */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

Valeur initialenowrap
Applicabilitéconteneurs flexibles
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'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

La propriété flex-wrap peut être défini grâce à l'un des mots-clés suivants.

Valeurs

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-direction et la ligne cross-end est à l'opposée cross-start.
wrap-reverse
Se comporte comme wrap mais 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 Edge Internet Explorer Opera Safari
Support simple 28.0[1] 21.0-webkit (Oui)-webkit
(Oui)
11.0-ms 12.10 6.1-webkit
Fonctionnalité Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Support simple 28.0[1] 4.4 (Oui)-webkit
(Oui)
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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : stephaniehobson, SphinxKnight, ss-bb
 Dernière mise à jour par : stephaniehobson,