flex-flow

flex-flow is a shorthand for the direction flex items run in (flex-direction) and whether they wrap (flex-wrap).

Syntax

<'flex-direction'> || <'flex-wrap'>

1234

Presets

Sample

Items

Drag the bottom-right corner to resize

flex-flow

rowflex-direction

wrapflex-wrap

.box {
  display: flex;
  flex-flow: row wrap;
}

1234

Write a flex-direction value (row, row-reverse, column, column-reverse) and a flex-wrap value (nowrap, wrap, wrap-reverse), separated by a space.
Either one alone is fine, in any order. wrap column means the same as column wrap.
The one you leave out takes its initial value. flex-flow: column is column nowrap, and flex-flow: wrap is row wrap.

The preview makes the box display: flex with a helper declaration. Each item is 30% of the box wide, so wrapping splits them into three and one.

flex-flow: row wrap: lay out cards or tags in a row and move what does not fit to the next line.
flex-flow: column: stack the items vertically.

As a shorthand, it resets the part you leave out to its initial value. Writing flex-flow: column after flex-wrap: wrap turns wrapping back to nowrap.
In the column direction, items wrap only when the box has a height or a maximum height and the items do not fit.
row-reverse and wrap-reverse reverse only the visual order. Focus order with the Tab key and reading order stay in HTML order.
Works in all major browsers.