flex

Résumé

La propriété CSS flex permet à un élément flex de modifier ses dimensions afin de remplir l’espace disponible. Les éléments flex peuvent être distendus jusqu’à un espace de taille proportionnelle à leur ratio d’extension (ou de compression) flex.

  • Valeur initiale La concaténation des valeurs initiales des propriétés associées :
    • flex-grow: 0
    • flex-shrink: 1
    • flex-basis: auto
  • S'applique à éléments flexibles
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée comme chacune des propriétés du raccourci:
    • flex-grow: comme spécifié
    • flex-shrink: comme spécifié
    • flex-basis: comme spécifié, mais avec les longueurs relatives transformées en longueurs absolues
  • Animable pour chaque propriété individuelle de la propriété raccourcie :
    • flex-grow: oui, comme un nombre, except between 0 and other values
    • flex-shrink: oui, comme un nombre, except between 0 and other values
    • 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 canonique l'ordre d'apparition dans la grammaire formelle des valeurs

Reportez-vous à la page « Utilisez les boîtes flexibles » pour plus d’informations et de propriétés.

Syntaxe

Syntaxe formelle : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
flex: none                                            /* Cas de la valeur 'none' */
flex: <'flex-grow'>                                   /* Syntaxe à une valeur, variation 1 */
flex: <'flex-basis'>                                  /* Syntaxe à une valeur, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Syntaxe à deux valeurs, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Syntaxe à deux valeurs, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Syntaxe à trois valeurs */

Valeurs

<'flex-grow'>
Voir <number> pour plus de détails. Une valeur négative n’est pas acceptée.
<'flex-shrink'>
Voir <number> pour plus de détails. Une valeur négative n’est pas acceptée. Cet élément est optionnel.
<'flex-basis'>
Définit les bases flex de l’élément. Toute valeur qui serait valide pour les propriétés width et length est acceptable. Une taille voulue de 0 doit spécifier l’unité pour ne pas être traitée comme une flexibilité. Valeur par défaut de 0%.
none
Ce mot-clé équivaut à 0 0 auto.
auto
Ce mot-clé équivaut à 1 1 auto.
initial
Ce mot-clé équivaut à 0 1 auto.
Note : La valeur par défaut de <'flex-basis'> n’est pas la même que la valeur par défaut de la propriété flex-basis.
Note : En l’absence de valeur précise, <'flex-grow'> et <'flex-shrink'> seront égaux à 1.

Exemple

#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;
}
<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (cliquer pour afficher/masquer la boite de droite)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

Resultat

Specifications

Spécification Statut Commentaire
CSS Flexible Box Layout Module
La définition de 'flex' dans cette spécification.
Last Call Working Draft  

Tableau de compatibilité

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base 18.0 (18.0) (behind a pref) [1] [2]
20.0 (20.0) [2]
21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Fonction Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base ? ? ? 12.10 ?

[1] Pour activer le support des boîtes flexibles dans Firefox 18 et 19, l'utilisateur doit passer la préférence about:config "layout.css.flexbox.enabled" à true.

[2] Les boîtes flexibles multilignes sont supportées depuis Firefox 28.

Voir également

Étiquettes et contributeurs liés au document

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