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. 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 flex-basis.

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

Compatibilité des navigateurs

[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).
En plus de la version non préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

[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

• Utiliser les boîtes flexibles (flexbox) CSS