CSS flex-direction property

Description

CSS flex-direction property represents the direction of flow of flex items.

Syntax

flex-direction : row | row-reverse | column | column-reverse

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;

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;

Applicable to

It applies to flex containers.

#CSS digger
Was this article helpful?

 

#First 1

#Second 2

#Third 3

×

Ctrl+D