oujood.com

contrôler comment les éléments d'un conteneur flex sont empilés? la propriété css flex-wrap

La propriété flex-wrap spécifie si les éléments flexibles doivent être sur une seule ligne ou non. Si les éléments ne sont pas des éléments flexibles, la propriété flex-wrap n'a aucun effet.
La propriété flex-wrap est utile pour afficher des éléments flex sur plusieurs lignes lorsque l'espace est limité. Elle peut prendre les valeurs nowrap, wrap et wrap-reverse pour contrôler l'ordre d'affichage des éléments sur les lignes.

chercher |

Définition et utilisation da la propriété css flex-wrap

La propriété CSS flex-wrap permet de déterminer comment les éléments d'un conteneur flex (éléments enfants d'un élément avec display: flex ou display: inline-flex) sont empilés les uns sur les autres lorsque l'espace disponible dans le conteneur est insuffisant pour les afficher sur une seule ligne.

Avec flex-wrap: nowrap, les éléments d'un conteneur flex sont tous affichés sur une seule ligne, même si cela signifie qu'ils sont tronqués si l'espace disponible est insuffisant. Cette valeur est la valeur par défaut.


Exemple : element {flex-wrap : wrap ;}

la propriété flex-wrap définit également l'axe transversal qui détermine la direction dans laquelle les nouvelles lignes sont empilées, ce qui facilite la réactivité de la mise en page sans requêtes média CSS.

Rappel : L'axe transversal est l'axe perpendiculaire à l'axe principal. Sa direction dépend de la direction de l'axe principal.


La Syntaxe CSS flex-wrap
Avec flex-wrap: wrap, les éléments d'un conteneur flex sont affichés sur plusieurs lignes, si nécessaire, pour remplir tout l'espace disponible dans le conteneur.


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"

Prise en charge de la propriété css dans les navigateurs

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

Valeurs de la propriété flex-wrap

nowrap : Valeur par défaut, ligne unique qui peut déborder du conteneur.
wrap : multi-lignes, la direction est définie par flex-direction,utilisée pour briser l'élément flexible en plusieurs lignes. Elle permet de mettre les éléments flexibles sur plusieurs lignes en fonction de la largeur de l'élément flexible.
wrap-reverse : multi-lignes, opposé à la direction définie par flex-direction
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son é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>

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

En résumé, la propriété flex-wrap permet de contrôler comment les éléments d'un conteneur flex sont empilés lorsque l'espace disponible est insuffisant pour les afficher sur une seule ligne. Cela peut être utile pour afficher des éléments de manière responsive, en fonction de la taille de l'écran ou de la fenêtre du navigateur.





Voir aussi nos tutoriel :

fonction echo, echo

Affiche une chaîne de caractères

utiliser le dom xml en php

Utiliser le dom xml en php

HTML et CSS les formulaires

Afficher les formulaire en HTML...