SyntaxStudy
Sign Up
Home CSS Reference flex-direction

flex-direction

property CSS3

Defines the direction flex items are placed in the flex container along the main axis.

Syntax

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

Example

css
/* Horizontal (default) */
.row { display: flex; flex-direction: row; }

/* Vertical stack */
.column {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Reverse order */
.reversed { display: flex; flex-direction: row-reverse; }