logo oujood
🔍

La propriété CSS flex-wrap : maîtriser l'empilement des éléments flexibles

Apprenez à utiliser flex-wrap pour créer des mises en page flexibles et responsives. Cette propriété contrôle le passage à la ligne des éléments flex avec les valeurs nowrap, wrap et wrap-reverse.

OUJOOD.COM

Définition et utilisation de la propriété CSS flex-wrap

La propriété CSS flex-wrap contrôle le comportement d'affichage des éléments flexibles lorsque l'espace disponible dans leur conteneur devient insuffisant. Elle détermine si les éléments doivent rester sur une seule ligne ou se répartir sur plusieurs lignes.

Cette propriété s'applique uniquement aux conteneurs flexibles, c'est-à-dire aux éléments ayant display: flex ou display: inline-flex. Sur les éléments non-flexibles, flex-wrap n'a aucun effet.

Par défaut, avec flex-wrap: nowrap, tous les éléments d'un conteneur flex restent sur une seule ligne, quitte à déborder ou à être compressés si l'espace est limité.


Exemple : element {flex-wrap : wrap ;}

La propriété flex-wrap définit également l'axe transversal, qui détermine la direction d'empilement des nouvelles lignes. Cette fonctionnalité facilite la création de mises en page responsives sans avoir besoin de requêtes média CSS complexes.

Rappel : L'axe transversal est l'axe perpendiculaire à l'axe principal. Sa direction dépend de la valeur de la propriété flex-direction appliquée au conteneur.


Syntaxe de la propriété CSS flex-wrap
Avec flex-wrap: wrap, les éléments flexibles se répartissent automatiquement sur plusieurs lignes lorsque la largeur du conteneur est insuffisante, créant ainsi une disposition responsive et adaptative.


flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Valeurs par défautnowrap
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.flexWrap="nowrap"

Compatibilité navigateurs de la propriété flex-wrap

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion29
21 -webkit-		1128
18 -moz-		9
6.1 -webkit-		17

Les différentes valeurs de flex-wrap

nowrap : Valeur par défaut. Force tous les éléments à rester sur une seule ligne, même si cela entraîne un débordement du conteneur. Les éléments sont compressés pour tenir dans l'espace disponible.

wrap : Permet aux éléments flexibles de passer à la ligne suivante lorsque l'espace est insuffisant. Les nouvelles lignes s'ajoutent dans la direction définie par flex-direction, créant un affichage multi-lignes adaptatif idéal pour les interfaces responsives.

wrap-reverse : Fonctionne comme wrap, mais inverse l'ordre d'empilement des lignes. Les nouvelles lignes s'ajoutent dans la direction opposée à celle définie par flex-direction.

initial : Réinitialise la propriété à sa valeur par défaut (nowrap).

inherit : Hérite de la valeur flex-wrap de l'élément parent.

Exemple    📋 Copier le code 

 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS flex-wrap </title>
 <style> 
.flex-container {
  width:500px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap li {
  background: gold;
}

.wrap-reverse         { 
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}  
.wrap-reverse li {
  background: deepskyblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
</style>
</head>
<body>

<h1>propriété css flex-wrap</h1>
<h2> nowrap </h2>
<ul class="flex-container nowrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>
<h2> wrap </h2>
<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>
<h2> wrap-reverse </h2>
<ul class="flex-container wrap-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>
</body>
</html>

Manipuler flex-wrap avec JavaScript

Exemple    📋 Copier le code 

 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> La propriété CSS flex-wrap en javascript </title>
 <style> 
#main {
  width: 200px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
}

#main div {
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

<h1>Changer flex-wrap avec JavaScript</h1>

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

<p>Cliquez sur le bouton "CHANGER" pour définir la valeur de la propriété flexwrap sur "nowrap".</p>

<button onclick="FonctionChanger()"> CHANGER </button>       
<button onclick="location.reload();"> REUNITIALISER </button>

<script>
function FonctionChanger() {
  document.getElementById("main").style.flexWrap = "nowrap";
}
</script>

</body>
</html>

Cas d'usage et bonnes pratiques

La propriété flex-wrap est particulièrement utile pour créer des grilles responsives sans media queries. Elle permet aux éléments de s'adapter automatiquement à la largeur disponible, offrant une expérience utilisateur optimale sur tous les appareils.

Quand utiliser flex-wrap :
- Pour créer des galeries d'images adaptatives
- Pour afficher des cartes de produits dans un e-commerce
- Pour concevoir des barres de navigation qui se réorganisent automatiquement
- Pour développer des tableaux de bord avec des widgets flexibles

Combinée avec d'autres propriétés flexbox comme justify-content et align-items, flex-wrap offre un contrôle précis sur la disposition et l'alignement des éléments, simplifiant considérablement le développement de layouts modernes et responsives.


- Liste des propriétés css -