flex-flow

The flex-flow property is a shorthand for specifying the flex-direction and flex-wrap properties. Defining flex-flow provides the parameters for child elements to be organized across the horizontal and vertical axes.

Syntax

#element-container {
display: flex;
flex-flow: <flow-value> <flow-value>;
}

A <flow-value> can be any of the values available for flex-direction and flex-wrap:

  • flex-direction: row, row-reverse, column, column-reverse
  • flex-wrap: wrap, nowrap, wrap-reverse

Example 1

Content that is spaced horizontally and wrapping top to bottom:

#spam-container {
display: flex;
flex-flow: row wrap;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors