flex-wrap
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 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
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
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-directionet la ligne cross-end est à l'opposée cross-start. wrap-reverse-
Se comporte comme
wrapmais cross-start et cross-end sont permutées.
Définition formelle
| Valeur initiale | nowrap |
|---|---|
| Applicabilité | conteneurs flexibles |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
flex-wrap =
nowrap |
wrap |
wrap-reverse
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;
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
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Maîtriser le retour à la ligne des éléments flexibles