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 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
css
.container {
display: flex;
flex-direction: column;
}This displays flex items vertically from top to bottom.
Attributes
| 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; |
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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| flex-direction | 29 | 12 | 22 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
rowis the default flex direction.columnis commonly used for vertical layouts.row-reverseandcolumn-reversereverse the visual order of items.- Flex direction affects how
justify-contentandalign-itemsbehave. - This property only works when
display: flex;is applied.
Visual Comparison
row (default)
text
Item 1 Item 2 Item 3row-reverse
text
Item 3 Item 2 Item 1column
text
Item 1
Item 2
Item 3column-reverse
text
Item 3
Item 2
Item 1Conclusion
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.