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.

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

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-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) 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) 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 : SphinxKnight, ss-bb
 Dernière mise à jour par : SphinxKnight,