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.

Exemples

Specifications

Spécification Statut Commentaire
CSS Flexible Box Layout Module Candidate Recommendation  

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 : teoli, Golmote, FredB, Delapouite, lalop, rd6137
Dernière mise à jour par : teoli,
Masquer la barre latérale