Your Search Results



    The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap individual properties.

    • Initial value the concatenation of the initial values of its longhand properties:
      • flex-direction: row
      • flex-wrap: nowrap
    • Applies to flex containers
    • Inherited no
    • Media visual
    • Computed value as each of the properties of the shorthand:
      • flex-direction: as specified
      • flex-wrap: as specified
    • Animatable no
    • Canonical order order of appearance in the formal grammar of the values

    See Using CSS flexible boxes for more properties and information.


    /* flex-flow: <'flex-direction'> */
    flex-flow: row;
    flex-flow: row-reverse;
    flex-flow: column;
    flex-flow: column-reverse;
    /* flex-flow: <'flex-wrap'> */
    flex-flow: nowrap;
    flex-flow: wrap;
    flex-flow: wrap-reverse;
    /* flex-flow: <'flex-direction'> and <'flex-wrap'> */
    flex-flow: row nowrap;
    flex-flow: column wrap;
    flex-flow: column-reverse wrap-reverse;
    /* Global values */
    flex-flow: inherit;
    flex-flow: initial;
    flex-flow: unset;


    See flex-direction and flex-wrap for details on the values.

    Formal syntax

    <'flex-direction'> || <'flex-wrap'>


    element { 
      /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
      flex-flow: column-reverse wrap;            


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

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 28.0 21.0-webkit
    11 12.10 6.1-webkit
    Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Basic support 28.0 ? 11 12.10 7.1-webkit

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,