CSS flex-flow property

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;

Try it { }

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;

Try it { }

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;

Try it { }

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;

Try it { }

flex-wrap

nowrapDefault

The content flows across one line within flex-container.

flex-wrap: nowrap;

Try it { }

wrap

The content flows across multiple lines within flex-container.

flex-wrap: wrap;

Try it { }

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;

Try it { }