flex-flow

Published Jul 23, 2021Updated May 15, 2024
Contribute to Docs

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

All contributors

Looking to contribute?

Learn CSS on Codecademy