flex
La propriété flex
est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.
Les propriétés détaillées correspondantes à cette propriété raccourcie sont flex-grow
, flex-shrink
et flex-basis
.
Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.
Exemple interactif
Description
Pour la plupart des cas, on utilisera une des valeurs suivantes : auto
, initial
, none
ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :
Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer min-width
ou min-height
.
Voir la page Utiliser les boîtes flexibles (flexbox) CSS pour plus d'informations.
Syntaxe
/* Valeurs de base */
flex: auto;
flex: initial;
flex: none;
/* Une valeur sans unité pour flex-grow */
/* flex-basis vaut alors 0 */
flex: 2;
/* Une valeur, largeur/hauteur: flex-basis */
flex: 10em;
flex: 30px;
flex: content;
/* Deux valeurs : flex-grow | flex-basis */
flex: 1 30px;
/* Deux valeurs : flex-grow | flex-shrink */
/* flex-basis vaut alors 0 */
flex: 2 2;
/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Valeurs globales */
flex: inherit;
flex: initial;
flex: unset;
La propriété flex
peut être définie avec une, deux ou trois valeurs.
- Avec une valeur, la syntaxe doit être :
- un nombre sans unité (
<number>
) : celui-ci est alors interprété comme la valeur de<flex-grow>
- ou une valeur de largeur valide (
width
) : celle-ci est alors interprétée comme la valeur de<flex-basis>
- ou le mot-clé
none
.
- un nombre sans unité (
- Avec deux valeurs
- la première doit être un nombre sans unité (
<number>
) qui correspond à la valeur de<flex-grow>
. - la seconde valeur doit être :
- un nombre sans unité (
<number>
) : celui-ci est alors interprété comme la valeur de<flex-shrink>
- ou une valeur de largeur valide (
width
) : celle-ci est alors interprétée comme la valeur de<flex-basis>
- un nombre sans unité (
- la première doit être un nombre sans unité (
- Avec trois valeurs
- la première valeur doit être un nombre sans unité (
<number>
) : celui-ci est alors interprété comme la valeur de<flex-grow>
- la deuxième valeur doit être un nombre sans unité (
<number>
) : celui-ci est alors interprété comme la valeur de<flex-shrink>
- la troisième valeur doit être une valeur de largeur valide (
width
) : celle-ci est alors interprétée comme la valeur de<flex-basis>
- la première valeur doit être un nombre sans unité (
Valeurs
auto
-
L'élément est dimensionné selon ses propriétés
width
etheight
mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "flex: 1 1 auto
". initial
-
L'élément est dimensionné selon ses propriétés
width
etheight
. Ce comportement est équivalent à la valeur par défaut (0 1 auto
). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "flex: 0 1 auto
". none
-
L'élément est dimensionné par rapport à ses propriétés
width
etheight
. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "flex: 0 0 auto
". <'flex-grow'>
-
Voir
flex-grow
. Les valeurs négatives sont interdites et la valeur par défaut est1
. <'flex-shrink'>
-
Voir
flex-shrink
. Les valeurs négatives sont interdites et la valeur par défaut est1
. <'flex-basis'>
-
Voir
flex-basis
. Une valeur valide pourwidth
etheight
. La valeur par défaut est0
.
Note : Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, flex-basis
vaudra 0. Pour plus d'informations, voir le brouillon de spécification du module des boîtes flexibles.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | éléments flexibles, y compris les pseudo-éléments intégrés dans le flux |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
Exemples
CSS
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
HTML
<div id="flex-container">
<div class="flex-item" id="flex">Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale »)</div>
<div class="raw-item" id="raw">Boîte « normale » </div>
</div>
JavaScript
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
Résultat
Spécifications
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-property |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Contrôler les proportions des boîtes flexibles le long de l'axe principal