Comparaison binaire des n premiers caractères
Définition et utilisation da la propriété css flex
La propriété CSS flex est un raccourci de la combinaison des propriétés :- flex-grow,
- flex-shrink
- flex-basis.
La propriété CSS flex est utilisée pour définir la longueur des éléments flexibles. La propriété flex est très réactive et adaptée aux mobiles.
Il est facile de positionner les éléments enfants et le conteneur principal. La marge ne fusionne pas avec les marges du contenu. L'ordre de tout élément peut être facilement modifié sans avoir à éditer la section HTML.
La Syntaxe CSS flex
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
| Valeurs par défaut | 0 1 auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.flexShrink="1" |
Valeurs de la propriété flex
flex-grow : Un nombre spécifiant la taille de l'élément par rapport au reste des éléments flexibles.flex-shrink : Un nombre spécifiant de combien l'élément va rétrécir par rapport au reste des éléments flexibles.
flex-basis. : La longueur de l'élément. Valeurs légales : "auto", "inherit", ou un nombre suivi de "%", "px", "em" ou toute autre unité de longueur.
auto : Identique à 1 1 auto.
initial : Identique à 0 1 auto.
none : Identique à 0 0 auto.
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> Propriété CSS flex </title>
<style>
body {
background-color:#E7E9EB;
}
#myDIV { width: 100%;
height:100%;
background-color:#FFFFFF;
margin:auto;
}
#mymain {height:100%;
width: 100%;
display: flex;
}
#mymain div {
padding:1em;height:100%;
}
#divBleu{flex: 0 1 60%}
#divRouge {
flex: 0 1 20%;
}
#divJaune{flex: 0 1 20%;}
</style>
</head>
<body>
<h1>La propriété css flex</h1>
<div id="myDIV">
<h2>Définissez la propriété flex des div Rouge, Blue et Jaune :</h2>
<div id="mymain">
<div id="divRouge" style="background-color:coral;">
<h2>div rouge</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Diam maecenas sed enim ut sem viverra aliquet eget sit.</div>
<div id="divBleu" style="background-color:lightblue;">
<h2>div bleu</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ac turpis egestas sed tempus urna et.
Suspendisse potenti nullam ac tortor vitae purus faucibus ornare.
Vitae auctor eu augue ut lectus arcu.
Ac orci phasellus egestas tellus rutrum tellus.
Mattis aliquam faucibus purus in massa.
</div>
<div id="divJaune" style="background-color:khaki;">
<h2>div jaune</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Diam maecenas sed enim ut sem viverra aliquet eget sit.
</div>
</div>
</div>
</body>
</html>
Définition et utilisation da la propriété css flex-grow
La propriété flex-grow définit la capacité d'un élément flexible à augmenter si nécessaire par rapport aux autres éléments présents dans ce conteneur. Elle accepte une valeur sans unité qui sert de proportion. Elle détermine la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.Exemple :
element { flex-grow : 2 ;}
Par exemple, si tous les éléments enfants d’un conteneur fexible ont la valeur 1 pour flex-grow, ils auront touts la même taille à l'intérieur du conteneur.
Mais si vous attribuez à l'un des enfants la valeur 2 pour flex-grow, il occupera deux fois plus d'espace que les autres.
La Syntaxe CSS flex-grow
flex-grow: nombre| initial| inherit;
| Valeurs par défaut | 0 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.flexGrow="5" |
Valeurs de la propriété flex-grow
nombre : Un nombre spécifiant de combien l'élément va croître par rapport au reste des éléments flexibles. La valeur par défaut est 0initial : 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> Propriété CSS flex-grow </title>
<style>
body {
background-color:#E7E9EB;
}
#myDIV { width: 100%;
background-color:#FFFFFF;
margin:auto;
}
#mymain {
width: 100%;
display: flex;
}
#mymain div {
padding:1em;
}
#divRouge {flex-grow: 1 ;}
#divBleu{flex-grow: 3 ;}
#divJaune{flex-grow: 1 ;}
</style>
</head>
<body>
<h1>La propriété css flex-grow</h1>
<div id="myDIV">
<h2>Définissez la propriété flex-grow des div:
Rouge, Blue et Jaune :</h2>
<div id="mymain">
<div id="divRouge" style="background-color:coral;">
<h2>div rouge</h2>
</div>
<div id="divBleu" style="background-color:lightblue;">
<h2>div bleu</h2>
</div>
<div id="divJaune" style="background-color:khaki;">
<h2>div jaune</h2>
</div>
</div>
</div>
</body>
</html>
Définition et utilisation da la propriété css flex-shrink
La propriété css flex-shrink spécifie le "facteur de rétrécissement flex" qui détermine de combien l'élément flex va rétrécir par rapport au reste des éléments flex dans le conteneur flex lorsqu'il n'y a pas assez d'espace sur la ligne.Exemple : .element { flex-shrink : 2 ;}
Lorsqu'il est omis, il est défini sur 1 et le facteur de rétrécissement du flex est multiplié par la base du flex lors de la distribution de l'espace négatif.
La Syntaxe CSS flex-shrink
flex-shrink: nombre|initial|inherit;
| Valeurs par défaut | 1 |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.flexShrink="5" |
Valeurs de la propriété flex-shrink
nombre Un nombre spécifiant de combien l'élément sera rétréci par rapport au reste des éléments flexibles. La valeur par défaut est 1initial 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> Propriété CSS flex-shrink </title>
<style>
#main {
width: 550px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-shrink: 1;
flex-shrink: 1;
flex-basis: 100px;
font-size:10px;
padding: 5px;
}
#main div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h1>La propriété CSS flex-shrink </h1>
<div id="main">
<div style="background-color:coral;"><h2>flex-shrink: 1</h2></div>
<div style="background-color:lightblue;"><h2>flex-shrink: 5</h2></div>
<div style="background-color:khaki;"><h2>flex-shrink: 1</h2></div>
<div style="background-color:pink;"><h2>flex-shrink: 1</h2></div>
<div style="background-color:lightgreen;"><h2>flex-shrink: 1</h2>
</div><div style="background-color:lightgrey;"><h2>flex-shrink: 1</h2></div>
</div>
</body>
</html>
Définition et utilisation da la propriété css flex-basis
La propriété flex-basis spécifie la taille initiale de l'élément flex, avant que tout espace disponible ne soit distribué en fonction des facteurs flex. Lorsqu'elle est omise dans le raccourci flex, sa valeur spécifiée est la longueur zéro.Exemple : element {flex-basis : 100px ;}
Une valeur flex-basis définie sur auto dimensionne l'élément en fonction de sa propriété size (qui peut elle-même être le mot clé auto, qui dimensionne l'élément en fonction de son contenu).
La Syntaxe CSS flex-basis
flex-basis: nomber|auto|initial|inherit;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | ouiEn savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.flexBasis="200px" |
Valeurs de la propriété flex-basis
nombre Une unité de longueur(px, cm ...) ou un pourcentage, spécifiant la longueur initiale du ou des éléments flexibles.auto Valeur par défaut. La longueur est égale à la longueur de l'élément flexible. Si la longueur de l'élément n'est pas spécifiée, la longueur sera fonction de son contenu.
initial Définit cette propriété à sa valeur par défaut.
inherit Hérite cette propriété de son élément parent.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title> Propriété CSS flex-basis </title> <style> .oujood { width: 500px; min-height: 70px; display: flex; margin-left: auto; margin-right: auto; } .oujood div { flex-grow: 0; flex-shrink: 0; flex-basis: 100px; padding:5px; /* For Safari 6.1 and above browsers */ -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 100px; } .oujood div:nth-of-type(2) { flex-basis: 40%; } .oujood div:nth-of-type(3) { flex-basis: auto; } .oujood div:nth-of-type(4) { flex-basis: initial; } .oujood div:nth-of-type(5) { flex-basis: inherit; } </style> </head> <body style="text-align: center;"> <h1> La propriété CSS flex-basis </h1> <div class = "oujood"> <div style = "background-color:green;color:#fff;"> nombre 80px </div> <div style = "background-color:lightgreen;"> percentage </div> <div style = "background-color:blue;color:#fff;"> auto </div> <div style = "background-color:lightblue;"> initial </div> <div style = "background-color:green;color:#fff;"> inherit </div> </div> </body> </html>
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-, -ms-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29 21 -webkit- | 11 10-ms- | 28 18 -moz- | 9 6.1 -webkit- | 17 |
Changer la propriété CSS flex avec JavaScript
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Modifier la propriété CSS flex avec JavaScript </title>
<style>
#main {
width: 250px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex: 0 0 50px;
}
</style>
</head>
<body>
<h1>Changer la propriété CSS flex avec JavaScript</h1>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="divBleu">Blue DIV</div>
</div>
<p>Cliquez sur le bouton "CHANGER" pour définir la valeur de la propriété flex à "200px" pour l'élément div bleu.</p>
<button onclick="FonctionChanger()"> CHANGER </button>
<script>
function FonctionChanger() {
document.getElementById("divBleu").style.flex = "0 0 200px";
}
</script>
</body>
</html>