CSS Flex Direction

The CSS flex-direction property defines the direction in which Flex Items are placed inside a Flex Container.

By default, Flexbox places items horizontally from left to right. You can change this behavior using flex-direction.

Syntax

.container {
    display: flex;
    flex-direction: value;
}

The value determines the direction in which the Flex Items are arranged.

Values of flex-direction

Flex Direction Diagram

1. flex-direction: row

The row value is the default value of flex-direction.

It places Flex Items horizontally from left to right.

.container {
    display: flex;
    flex-direction: row;
}

Output

2. flex-direction: row-reverse

The row-reverse value places items horizontally in the reverse direction.

.container {
    display: flex;
    flex-direction: row-reverse;
}

Output

3. flex-direction: column

The column value places Flex Items vertically from top to bottom.

.container {
    display: flex;
    flex-direction: column;
}

Output

4. flex-direction: column-reverse

The column-reverse value places Flex Items vertically in reverse order, from bottom to top.

.container {
    display: flex;
    flex-direction: column-reverse;
}

Output

Comparing the Four Values

Real-World Example

Imagine a CIIT Training Institute page containing course cards.

If the cards need to appear side by side, use row. If they need to appear one below another, use column.

.courses {
    display: flex;
    flex-direction: row;
}