flex-flow

christian.dinh2481 total contributions
Published Jul 23, 2021Updated Sep 3, 2021
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
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- Anonymous contributorAnonymous contributor92 total contributions
- christian.dinh
- Anonymous contributor
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.