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

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard