Propriété CSS flex
La propriété CSS flex définit comment les éléments grandissent ou rétrécissent dans le conteneur. Découvrez des exemples pratiques.
La propriété flex définit les composantes d'une longueur flexible. C'est une propriété raccourcie pour les propriétés suivantes :
Les trois composantes sont optionnelles dans la déclaration raccourcie. Lorsqu'elles sont omises, flex-grow prend la valeur par défaut 1, flex-shrink prend la valeur par défaut 1, et flex-basis prend la valeur par défaut auto. Notez que le facteur flex-shrink est multiplié par la valeur de flex-basis lors de la distribution de l'espace négatif.
La propriété flex fait partie des propriétés CSS3.
Cette propriété fait partie du module Flexible Box Layout. S'il n'y a pas d'éléments flexibles, la propriété flex n'aura aucun effet.
Le mot-clé auto est équivalent à 1 1 auto. Il dimensionne l'élément en fonction des propriétés width/height. Si la propriété de taille principale de l'élément est définie sur auto, cela dimensionnera l'élément flex en fonction de son contenu.
Le mot-clé initial est équivalent à 1 0 auto. Il dimensionne l'élément en fonction de ses propriétés width/height (ou de son contenu si elles ne sont pas définies). L'élément flex devient ainsi inflexible lorsqu'il reste de l'espace libre, et ne rétrécit pas lorsque l'espace est insuffisant. Les techniques d'alignement ou les marges automatiques sont utilisées pour aligner les éléments flex le long de l'axe principal.
Le mot-clé none est équivalent à 0 0 auto. Il dimensionne l'élément selon les propriétés width et height. Il est totalement inflexible.
Remarque : les valeurs initiales de flex-grow et flex-shrink diffèrent de leurs valeurs par défaut lorsqu'elles ne sont pas incluses dans la déclaration raccourcie flex, afin de mieux prendre en charge les cas courants.
| Valeur initiale | 0 1 auto |
|---|---|
| S'applique à | Les éléments flex, y compris les pseudo-éléments en flux. |
| Hérité | Non. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | Object.style.flex = "1"; |
Syntaxe
Syntaxe de la propriété CSS flex
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Les valeurs peuvent être spécifiées dans n'importe quel ordre. Lorsque vous utilisez flex-basis, vous pouvez également appliquer des contraintes min-width ou min-height pour empêcher l'élément de rétrécir en dessous d'une taille spécifiée.
Exemple de la propriété flex :
Exemple de la propriété CSS flex
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex property example</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Résultat
Exemple de la propriété flex avec la valeur "flex-grow" :
Exemple de la propriété CSS flex avec la valeur flex-grow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow example</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>Exemple de la propriété flex avec la valeur "flex-shrink" :
Exemple de la propriété CSS flex avec la valeur flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Modèles raccourcis courants
Quelques valeurs de flex reviennent si souvent qu'il vaut la peine de les mémoriser :
flex: 1(=1 1 0) — l'élément grandit et rétrécit librement, en partant d'une taille de base de0. Appliquez-le à chaque enfant pour diviser le conteneur en colonnes de largeur égale, indépendamment du contenu.flex: auto(=1 1 auto) — grandit et rétrécit, mais la taille de départ est le contenu/widthde l'élément. Les éléments se partagent l'espace restant tout en conservant leurs proportions naturelles.flex: none(=0 0 auto) — un élément fixe et inflexible. Utilisez-le pour une barre latérale ou un bouton qui doit conserver sa taille tandis que les éléments frères s'adaptent autour de lui.flex: 0 0 200px— fixé à200px: il ne grandit ni ne rétrécit, utile pour une colonne à largeur fixe.
Un écueil fréquent : flex: 1 utilise un flex-basis de 0, donc la largeur intrinsèque du contenu est ignorée et les colonnes deviennent vraiment égales. Si vous souhaitez plutôt des colonnes dimensionnées selon leur contenu mais capables de s'étirer, utilisez flex: auto.
Valeurs
| Valeur | Description |
|---|---|
| flex-grow | Spécifie dans quelle mesure l'élément grandira par rapport aux autres éléments flexibles du même conteneur. |
| flex-shrink | Spécifie dans quelle mesure l'élément rétrécira par rapport aux autres éléments flexibles du même conteneur. |
| flex-basis | Spécifie la longueur de l'élément par "auto", "inherit", ou un nombre suivi de "%", "px", "em", etc. |
| auto | Équivalent à 1 1 auto. |
| initial | Équivalent à 1 0 auto. |
| none | Équivalent à 0 0 auto. |
| inherit | Hérite de cette propriété depuis son élément parent. |