mozilla
Ihre Suchergebnisse

    flex-direction

    Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!

    Summary

    The CSS flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

    Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

    See Using CSS flexible boxes for more properties and information.

    Syntax

    /* The direction text is laid out in a line */
    flex-direction: row;
    
    /* Like <row>, but reversed */
    flex-direction: row-reverse;
    
    /* The direction in which lines of text are stacked */
    flex-direction: column;
    
    /* Like <column>, but reversed */
    flex-direction: column-reverse;
    
    flex-direction: inherit
    

    Values

    The following values are accepted:

    row
    The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
    row-reverse
    Behaves the same as row but the main-start and main-end points are permuted.
    column
    The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
    column-reverse
    Behaves the same as column but the main-start and main-end are permuted.

    Formal syntax

    row | row-reverse | column | column-reverse
    

    Examples

    element { 
      flex-direction: row-reverse;
    }
    

    Specifications

    Specification Status Comment
    CSS Flexible Box Layout Module
    The definition of 'flex-direction' in that specification.
    Candidate Recommendation  

    Browser compatibility

    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 Not supported
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support ? ? Not supported 12.10 Not supported

    [1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

    [2] Multi-line flexbox are supported since Firefox 28.

    See also

    Schlagwörter des Dokuments und Mitwirkende

    Zuletzt aktualisiert von: wbamberg,