HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials
CSS Tutorial

CSS Flexbox

Flex Direction

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 flex-direction property only works on a flex container.

Syntax

Flex Direction Syntax

css

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

Flex Direction Example

css

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

This displays flex items vertically from top to bottom.

Attributes

ValueDescriptionExample
rowDefault. Items are arranged left to rightflex-direction: row;
row-reverseItems are arranged right to leftflex-direction: row-reverse;
columnItems are arranged top to bottomflex-direction: column;
column-reverseItems are arranged bottom to topflex-direction: column-reverse;

Example

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>

Output

Browser Output

css

The flex items will appear in a vertical column
Each item will have spacing between it
The items will be displayed in this order:
Item 1
Item 2
Item 3

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE
YesYesYesYesYesPartial

Notes

  • row is the default flex direction.
  • column is commonly used for vertical layouts.
  • row-reverse and column-reverse reverse the visual order of items.
  • Flex direction affects how justify-content and align-items behave.
  • This property only works when display: flex; is applied.

Visual Comparison

row (default)

text

Item 1   Item 2   Item 3

row-reverse

text

Item 3   Item 2   Item 1

column

text

Item 1
Item 2
Item 3

column-reverse

text

Item 3
Item 2
Item 1

Conclusion

The Flex Direction property determines how flex items are arranged within a flex container. Whether you need horizontal, vertical, or reversed layouts, flex-direction provides a simple and powerful way to control the flow of content.

PreviousFlex ContainerNextJustify Content