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 distendu 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

Formal grammar: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */

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 ? 21.0-webkit ? ? ?
Fonction Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : rd6137, FredB, lalop, teoli, Delapouite
Dernière mise à jour par : teoli,
Masquer la barre latérale