flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Exemple interactif

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

Syntaxe

css
/* 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;

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. Cette valeur est la valeur par défaut.

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.

Définition formelle

Valeur initialenowrap
Applicabilitéconteneurs flexibles
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

Exemples

HTML

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>

CSS

css
.contenu,
.contenu1,
.contenu2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  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;
}

Résultat

Spécifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-wrap-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi