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 é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 correspondantes à cette propriété raccourcie sont flex-shrink, flex-grow et flex-basis.

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 :

auto
L'élément est dimensionné selon ses propriétés width et height 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
La valeur par défaut. L'élément est dimensionné selon ses propriétés width et height. Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans lee 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 et height. 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".
<positive-number>
Le nombre indique la proportion d'espace disponible qui peut être consommée par l'élément dans le conteneur flexible. Cette valeur est équivalente à "flex: <positive-number> 1 0".

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.

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>

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>

Valeurs

<'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 auto.
none
Ce mot-clé correspond à 0 0 auto.
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.

Syntaxe formelle

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

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 (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.

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
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Aucun support 20 — 61
Notes
Notes Flex items that are sized according to their content are sized using fit-content, not max-content.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Notes
Support complet 11
Notes
Notes Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Support complet 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info.
Notes Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
Opera Support complet 12.1Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet Oui
Support complet Oui
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android ? Opera Android Support complet 12.1Safari iOS Support complet Oui
Support complet Oui
Support complet 7.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,