flex-flow

The flex-flow property is shorthand for flex-direction and flex-wrap, in that order.

Syntax

This property only has an effect on flexible items.

.container {
  display: flex;
  flex-flow: column-reverse wrap;
}

Values

flex-direction
Default value is “row”. Designates the direction in which the flexible items will flow. Possible values: row, row-reverse, column, column-reverse, initial, inherit.

flex-wrap
Default value is “nowrap”. Designates whether the items inside a flex container should wrap or not. Possible values: nowrap, wrap, wrap-reverse, initial, inherit.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of flex-flow? Submit a codepen.io demo and we'll showcase it here ↴