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.

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 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

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

.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: 50%;
}
.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

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'flex-wrap' dans cette spécification.
Candidat au statut de recommandation  

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple291228111179
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.4 ?125212.19.2 ?

1. Partial support due to large number of bugs present. See Flexbugs.

Voir aussi

Étiquettes et contributeurs liés au document

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