mozilla
Vos résultats de recherche

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