MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Vos résultats de recherche

    flex-direction

    Summary

    La propriété CSS flex-direction précise comment les éléments flexibles sont placés dans le conteneur flex définissant l'axe principal et la direction (normale ou inversée).

    Notez que les valeurs row et row-reverse sont affectées par la direction du conteneur flex. Si son attribut dir vaut ltr, row represente l'axe horizontal orienté de gauche à droite, et row-reverse de droite à gauche ; si l'attribut dir vaut rtl, row represente l'axe orienté de droite à gauche, et row-reverse de gauche à droite.

    Voir Using CSS flexible boxes  pour plus de propriétés et d'informations.

    Syntaxe

    Syntaxe formelle : row | row-reverse | column | column-reverse
    
    flex-direction: row
    flex-direction: row-reverse
    flex-direction: column
    flex-direction: column-reverse
    
    flex-direction: inherit
    

    Valeurs

    Les valeurs suivantes sont acceptées :

    row
    L'axe principal du conteneur flex est le même que la direction du texte. Les points main-start et main-end sont les mêmes que la direction du contenu.
    row-reverse
    A le même comportement que row mais les points main-start et main-end sont permutés.
    column
    L'axe principal du conteneur flex est le même que l'axe block. Les points main-start et main-end sont les mêmes que les points before et after du mode d'écriture.
    column-reverse
    A le même comportement que column mais les points main-start et main-end sont permutés.

    Exemples

    element { 
      flex-direction: row-reverse;
    }
    

    Spécifications

    Specification Status Comment
    CSS Flexible Box Layout Module Candidate Recommendation  

    Compatibilité des navigateurs

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 18.0 (18.0) (behind a pref) [1] [2]
    20.0 (20.0) [2]
    21.0-webkit 11 12.10 Pas de support
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support ? ? Pas de support 12.10 Pas de support

    [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 aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: PifyZ, Golmote, teoli
    Dernière mise à jour par : teoli,
    Masquer la barre latérale