CSS flex-flow property

Description

CSS flex-flow is a short hand property of flex-direction and flex-wrap. Please go through the flex-direction and flex-wrap properties first.

Syntax

flex-flow : flex-direction   flex-wrap

Property values

flex-direction

rowDefault

The progress of flow of content is from left to right i.e. main-start to main-end for horizontal writing mode.

flex-direction: row;

row-reverse

The progress of flow of content is from right to left i.e. main-start and main-end are swapped for horizontal writing mode.

flex-direction: row-reverse;

column

The progress of flow of content is from top to bottom i.e. cross-start to cross-end for horizontal writing mode.

flex-direction: column;

column-reverse

The content flows from bottom to top i.e. cross-start and cross-end are swapped for horizontal writing mode.

flex-direction: column-reverse;

flex-wrap

nowrapDefault

The content flows across one line within flex-container.

flex-wrap: nowrap;

wrap

The content flows across multiple lines within flex-container.

flex-wrap: wrap;

wrap-reverse

The content flows across multiple lines and the lines are stacked in reverse order i.e. the cross-axis is reversed.

flex-wrap: wrap-reverse;

Applicable to

It applies to flex containers.

#CSS digger
Was this article helpful?

 

#First 1

#Second 2

#Third 3

×

Ctrl+D