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é CSS flex-wrap définit si les éléments flexibles sont forcés sur une seule ligne ou peuvent passer à la ligne sur plusieurs lignes. Si le retour à la ligne est autorisé, elle définit 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>Élément Un</div>
<div>Élément Deux</div>
<div>Élément Trois</div>
<div>Élément Quatre</div>
<div>Élément Cinq</div>
<div>Élément Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
La propriété raccourcie flex-flow permet de définir à la fois les propriétés flex-direction et flex-wrap, qui définissent respectivement les axes principal et transversal du conteneur flexible.
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: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
Valeurs
La propriété flex-wrap peut être défini grâce à l'un des mots-clés suivants :
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 à inline-start ou block-start, en fonction du mode d'écriture actuel, et de la valeur de
flex-direction. Cette valeur est la valeur par défaut. wrap-
Les éléments flexibles sont disposés sur plusieurs lignes. La ligne cross-start est équivalente à inline-start ou block-start, en fonction du mode d'écriture actuel, et de la valeur de
flex-direction. 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
Définir les valeurs de retour à la ligne du conteneur flexible
HTML
<h4>Un exemple de <code>flex-wrap:wrap</code></h4>
<div class="contenu">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
<h4>Un exemple de <code>flex-wrap:nowrap</code></h4>
<div class="contenu1">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
<h4>Un exemple de <code>flex-wrap:wrap-reverse</code></h4>
<div class="contenu2">
<div class="rouge">1</div>
<div class="vert">2</div>
<div class="bleu">3</div>
</div>
CSS
/* Styles communs */
.contenu,
.contenu1,
.contenu2 {
color: white;
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
- La propriété
flex-direction - La propriété raccourcie
flex-flow - Concepts de base des boîtes flexibles
- Maîtriser le retour à la ligne des éléments flexibles
- Le module du modèle de boîte flexible CSS