CSS flex-direction property

Property values

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 { }