CSS flex-flow property

Course recommendation:

Definition and usage

The flex-flow property is a shorthand property for the following properties:Note:

If the element is not a flexible item, the flex property is invalid.

See also:CSS Tutorial:

flex-shrink propertyCSS Flexible Box

flex-shrink propertyflex property

flex-shrink propertyflex-direction property

flex-shrink propertyflex-basis property

flex-shrink propertyflex-grow property

flex-shrink propertyCSS Reference Manual:

flex-wrap propertyHTML DOM Reference Manual:

flexFlow property

Example

Display flexible items in reverse order and wrap when necessary:
  div {
  display: flex;
flex-flow: row-reverse wrap;

}

Try it yourself

CSS syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Attribute value Value
flex-direction

flex-wrap

  • Description
  • row
  • row-reverse
  • column
  • Sets this property to its default value. See also
  • Inherits this property from its parent element. See also

column-reverse

The default value is "row".

Specifies the direction of the flexible items.

flex-wrap

  • Possible values:
  • nowrap
  • wrap
  • Sets this property to its default value. See also
  • Inherits this property from its parent element. See also

wrap-reverse

The default value is "nowrap".

Sets this property to its default value. See also Specifies whether the flexible item should wrap. Sets this property to its default value. See alsoAnimation-related properties
Inherits this property from its parent element. See also initial Inherits this property from its parent element. See alsoAnimation-related properties

inherit

Technical details Default value:
row nowrap Inheritance:
No Animation production:Not supported. See also:Animation-related properties
. Version:
CSS3 JavaScript syntax:

object.style.flexFlow="column nowrap"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0