Compte le nombre de mots utilisés dans une chaîne
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éfaut | nowrap |
|---|---|
| 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.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29 21 -webkit- | 11 | 28 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.