Propriété CSS flex
La propriété flex spécifie les components d'une longueur flexible. C'est une propriété raccourcie pour les propriétés flex-grow, flex-shrink et flex-basis. Les propriétés flex-shrink et flex-basis sont facultatives, i.e. vous ne devez pas les comprendre dans la déclaration flex.
La propriété flex est une partie de Le guide ultime de Flexbox. S'il n'y a pas des éléments flexibles, la propriété flex n'aura aucun effet.
Quand on ne comprend pas la propriété flex-grow dans la déclaration raccourcie, la valeur est initialement définie à 1. Quand on ne comprend pas la propriété flex-shrink dans la déclaration en sténo, la valeur est initialement définie à 1. Notez, que le facteur flex-shrink est multiplié par flex-basis quand l'espace négatif est distribué. Quand la propriété flex-basis n'est pas comprise, sa valeur est définie à 0%.
"Auto" est la valeur initiale de la propriété flex. Cette valeur donne une taille à l'élément sur la base des propriétés width/height. (Si la propriété de la taille principale de l'élément compute à "auto", cela va donner une taille à flex sur la base de ses contenus.)
"Initial" donne une taille à l'élément sur la base de ses propriétés width/height (ou ses contenus). Elle fait l'élément flex inflexible quand il reste quelque espace libre , mais elle le permet de rétrécir au minimum quand il n'y a pas d'espace suffisant. Les capacités d'alignement ou les marges auto peuvent être utilisés pour aligner les éléments flex le long de l'axe principal.
"None" est dimensionné par rapport aux propriétés width et height. Cela est totalement inflexible.
| Valeur initiale | 0 1 auto |
| Appliquée à | Éléments flex, y compris pséudo-éléments entrants. |
| Héritée | Non. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | Object.style.flex = "1"; |
Syntaxe
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Exemple
<!DOCTYPE html>
<html>
<title>Titre du document</title>
<head>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: -webkit-flex;
display: flex;
}
.box div {
flex: 1;
}
.green {background-color: #8ebf42}
.blue {background-color: #1c87c9;}
.gray {background-color: #666}
</style>
</head>
<body>
<h2>Exemple de la propriété flex</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Exemple, où l'un des éléments augmente.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {-webkit-flex-grow: 1;}
.box div:nth-of-type(2) {-webkit-flex-grow: 4;}
.box div:nth-of-type(3) {-webkit-flex-grow: 1;}
.box div:nth-of-type(4) {-webkit-flex-grow: 1;}
.box div:nth-of-type(5) {-webkit-flex-grow: 1;}
/* Standard syntax */
.example div:nth-of-type(1) {flex-grow: 1;}
.example div:nth-of-type(2) {flex-grow: 4;}
.example div:nth-of-type(3) {flex-grow: 1;}
.example div:nth-of-type(4) {flex-grow: 1;}
.example div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>
<h2>Exemple de flex-grow</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Un autre exemple avec les valeurs flex-shrink et flex-shrink comprises.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 2; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
-webkit-flex-shrink: 5; /* Safari 6.1+ */
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Exemple de flex-shrink</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| flex-grow | Spécifie le facteur d'expansion d'un élément flexible relativement au reste des éléments du même conteneur. |
| flex-shrink | Définit le facteur de rétrécissement d'un élément flexible relativement au reste des éléments du même conteneur. |
| flex-basis | Spécifie la longueur de l'élément par "auto", "inherit", ou un nombre suivi par "%", "px", "em" etc. |
| auto | Equivalent à 1 1 auto. |
| initial | Equivalent à 1 0 auto. |
| none | Equivalent à 0 0 auto. |
| inherit | Hérite la propriété de l'élément parent. |
Support de Navigateurs
|
|
|
|
|---|---|---|---|
|
29.0+ 21-28 -webkit- |
28.0+ |
9.0+ 6.1-8.0 -webkit- |
12.1+ |
Pratiquez vos connaissances
