Mozilla wants to hear from developers like you. http://www.surveygizmo.com/s3/2737536/440b74c45e94?a=mdn

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. 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. Les propriétés détaillées sont flex-shrink, flex-grow et cssxref("flex-basis")}}.

Valeur initialepour 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éenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • flex-grow: comme spécifié
  • flex-shrink: comme spécifié
  • flex-basis: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Animablepour chaque propriété individuelle de la propriété raccourcie :
  • flex-grow: oui, comme un nombre
  • flex-shrink: oui, comme un nombre
  • flex-basis: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Voir la page Utiliser les boîtes flexibles (flexbox) CSS pour plus d'informations.

Syntaxe

/* 0 0 auto */
flex: none;

/* Une valeur sans unité flex-grow */
flex: 2;

/* Une valeur, largeur/hauteur: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Deux valeurs : flex-grow | flex-basis */
flex: 1 30px;

/* Deux valeurs : flex-grow | flex-shrink */
flex: 2 2;

/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Valeurs globales */
flex: inherit;
flex: initial;
flex: unset;

Values

<'flex-grow'>
Voir flex-grow. Les valeurs négatives sont interdites et la valeur par défaut est 1.
<'flex-shrink'>
Voir flex-shrink. Les valeurs négatives sont interdites et la valeur par défaut est 1.
<'flex-basis'>
Voir flex-basis. Une valeur valide pour width et height. La valeur par défaut est 0%.
none
Ce mot-clé correspond à 0 0 auto.

Syntaxe formelle

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Exemples

CSS

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

HTML

<div id="flex-container">
    <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à 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

Spécification État Commentaires
CSS Flexible Box Layout Module
La définition de 'flex' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support simple 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
10.0-ms[3]
11.0[3]
12.10 6.1-webkit
9.0
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support simple ? 4.4 11 12.10 7.1-webkit

[1] Avec Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) et 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16), la prise en charge des boîtes flexibles était masquée par la préférence layout.css.flexbox.enabled qui valait false par défaut (désactivée).

[2] Les boîtes flexibles sur plusieurs lignes sont prises en charge à partir de Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

[3] Internet Explorer 10-11 ignorent l'utilisation de calc dans la partie associée à flex-basis lorsqu'on utilise la propriété raccourcie flex. Pour contourner le problème, on peut utiliser les propriétés détaillées plutôt que la propriété raccourcie. Voir Flexbug #8 pour plus d'informations. De plus, une déclaration flex avec une valeur sans unité pour flex-basis sera considérée invalide et sera ignorée (toujours avec IE 10-11). Pour contourner le problème, il suffit de toujours indiquer une unité pour la partie dédiée à flex-basis. Voir Flexbug #4 pour plus d'informations.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, Mahan91, teoli, Golmote, FredB, Delapouite, lalop, rd6137
 Dernière mise à jour par : SphinxKnight,