We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

flex-flow Redirect 1


The CSS flex-flow 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.


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


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


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 Candidate Recommendation  

Browser compatibility

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

See also

Document Tags and Contributors

Last updated by: Sheppy,