--- title: flex-wrap slug: Web/CSS/flex-wrap tags: - CSS - Propriété - Reference translation_of: Web/CSS/flex-wrap ---
{{CSSRef}}

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.

{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}

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

Syntaxe

/* 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 {{cssxref("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.

Syntaxe formelle

{{csssyntax}}

Exemples

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

.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;
}

Résultat

{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}

Spécifications

Spécification État Commentaires
{{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} {{Spec2('CSS3 Flexbox')}}  

{{cssinfo}}

Compatibilité des navigateurs

{{Compat("css.properties.flex-wrap")}}

Voir aussi