Flex Direction

Written by Swapnil RajaUpdated 30 Jul 2026

The Flex Direction property is used to define the direction in which flex items are displayed inside a flex container.

By default, Flexbox arranges items horizontally from left to right. However, using flex-direction, you can change the layout to display items vertically, reverse their order, or create other arrangements. The supporting concepts are explained in Flex Container and Justify Content.

The flex-direction property only works on a flex container.

Syntax

Flex Direction Syntax

css

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

Flex Direction Example

PreviousFlex Container NextJustify Content

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

Value	Description	Example
row	Default. Items are arranged left to right	flex-direction: row;
row-reverse	Items are arranged right to left	flex-direction: row-reverse;
column	Items are arranged top to bottom	flex-direction: column;
column-reverse	Items are arranged bottom to top	flex-direction: column-reverse;

Flex Direction Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>Flex Direction Example</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border: 2px solid black;
            padding: 10px;
            width: 200px;
        }
        .item {
            background-color: lightblue;
            padding: 15px;
            text-align: center;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Flex Direction

Syntax

Attributes

Example

Browser Support

Notes

Visual Comparison

Conclusion