CSS : flex-wrap - Web Formation

Description

La propriété flex-wrap est utilisée avec un conteneur Flexbox (display: flex).

Elle permet de contrôler si les éléments flexibles doivent rester sur une seule ligne ou s’ils peuvent passer à la ligne suivante lorsque l’espace manque.

Par défaut, Flexbox place tous ses éléments sur une seule ligne, même s’ils débordent. flex-wrap permet d’éviter ce débordement en autorisant les éléments débordant à s’afficher sur la ligne suivante.

Propriétés détaillées

flex-wrap : contrôle le retour à la ligne des éléments dans un conteneur flex.
flex-flow : propriété raccourcie combinant flex-direction et flex-wrap.

Valeurs possible

Voici les valeurs les plus courantes pour flex-wrap :

Valeur	Exemple	Description
`nowrap`	`flex-wrap: nowrap;`	Valeur par défaut. Tous les éléments restent sur une seule ligne, même si cela provoque un débordement.
`wrap`	`flex-wrap: wrap;`	Les éléments passent à la ligne suivante lorsque l’espace manque. C’est la valeur la plus utilisée pour les mises en page responsives.
`wrap-reverse`	`flex-wrap: wrap-reverse;`	Comme `wrap`, mais les lignes s’empilent dans l’autre sens.

Exemple

Démonstration interactive : flex-wrap

Choisissez une valeur

Aperçu

1 2 3 4 5 6 7 8 9

Code HTML & CSS

<div class="demo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</div>

<div class="demo">    <span>1</span>    <span>2</span>    <span>3</span>    <span>4</span>    <span>5</span>    <span>6</span>    <span>7</span>    <span>8</span>    <span>9</span></div>

.demo { 
    display: flex;
    flex-wrap: wrap;
    background-color: lightgrey;
}
.demo span {
    width: 200px;
    background-color: gold;
    margin: 5px;
}

.demo {     display: flex;    flex-wrap: wrap;    background-color: lightgrey;}.demo span {    width: 200px;    background-color: gold;    margin: 5px;}

.demo { 
    display: flex;
    flex-wrap: nowrap;
    background-color: lightgrey;
}
.demo span {
    width: 200px;
    background-color: gold;
    margin: 5px;
}

.demo {     display: flex;    flex-wrap: nowrap;    background-color: lightgrey;}.demo span {    width: 200px;    background-color: gold;    margin: 5px;}

.demo { 
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: lightgrey;
}
.demo span {
    width: 200px;
    background-color: gold;
    margin: 5px;
}

.demo {     display: flex;    flex-wrap: wrap-reverse;    background-color: lightgrey;}.demo span {    width: 200px;    background-color: gold;    margin: 5px;}

Remarques

flex-wrap: wrap est indispensable pour créer des galeries responsives en Flexbox.
Lors du wrap, l’ordre visuel peut changer en fonction de flex-direction et de la largeur disponible.