flex-flow property CSS Reference



Definition and Usage

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

  • Initial 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

Syntax

Formal syntax: <'flex-direction'> || <'flex-wrap'>

Values

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


Examples

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;            
}

Compatibility

Desktop browsers

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support Not supported 21.0-webkit Not supported 12.10 Not supported

Mobile browsers

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support Not supported NA Not supported 12.10 Not supported

Relative articles