Javatpoint Logo
Javatpoint Logo

CSS flex-flow property

This CSS property is shorthand for flex-direction and flex-wrap properties. It only works on the flex-items, so if the container's item is not a flex-item, the flex-flow property will not affect the corresponding item.

Syntax

The default value of the flex-flow property is row nowrap which is the concatenation of the default values of flex-direction (i.e. row) and flex-wrap (i.e. nowrap) properties.

The possible values of this CSS property are tabulated as follows:

Values Description
flex-direction The flex-direction property is used to set the direction of the flexible items inside the flex container. Its default value is row (left-to-right, top-to-bottom). The possible values of this property are row, row-reverse, column, and column-reverse.
flex-wrap The flex-wrap property specifies if the flex-items should wrap or not, in case of not enough space for them on one flex line. Its default value is nowrap. The possible values of this property are nowrap, wrap, and wrap-reverse.
initial It sets the property to its default value.
inherit It inherits the property from its parent element.

Example

Here, we are using the wrap value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

In the first container we apply the flex-flow: row nowrap; to the flex-items, in the second container we apply the flex-flow: row-reverse nowrap; to the flex-items, in the third container we apply the flex-flow: column nowrap; to the flex-items, and in the fourth container we apply the flex-flow: column-reverse nowrap; to the flex-items.

Test it Now

Output

CSS flex-flow property

Example

Similarly to the above example, here we are using the wrap value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

In the first container we apply the flex-flow: row wrap; to the flex-items, in the second container we apply the flex-flow: row-reverse wrap; to the flex-items, in the third container we apply the flex-flow: column wrap; to the flex-items, and in the fourth container we apply the flex-flow: column-reverse wrap; to the flex-items.

Test it Now

Output

CSS flex-flow property

Example

Here we are using the wrap-reverse value of the flex-wrap property and all the possible values of the flex-direction property that are row, row-reverse, column, and column-reverse.

Test it Now

Output

CSS flex-flow property
Next TopicMedia Queries




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA