Currently Empty: ₹0.00
CSS Flex Direction
CSS CODES & EXAMPLES
CSS Flex Direction
Learn how the CSS flex-direction property controls the direction in which flex items are arranged inside a flex container.
01
What is Flex Direction?
Control the main axis of a flex container
The flex-direction property defines the direction
in which flex items are placed inside a flex container.
It determines the main axis of the layout.
row
Items are arranged from left to right.
row-reverse
Items are arranged from right to left.
column
Items are arranged from top to bottom.
column-reverse
Items are arranged from bottom to top.
02
flex-direction: row
Default direction
The row value places flex items horizontally.
This is the default value of the flex-direction property.
flex-row.css
.container {
display: flex;
flex-direction: row;
}1
2
3
4
03
flex-direction: row-reverse
Reverse the horizontal direction
row-reverse places the flex items horizontally
in the opposite direction.
row-reverse.css
.container {
display: flex;
flex-direction: row-reverse;
}1
2
3
4
04
flex-direction: column
Arrange items vertically
The column value changes the main axis from
horizontal to vertical. Items are placed from top to bottom.
flex-column.css
.container {
display: flex;
flex-direction: column;
}ITEM 1
ITEM 2
ITEM 3
ITEM 4
05
flex-direction: column-reverse
Reverse the vertical direction
column-reverse arranges items vertically in
the reverse direction.
column-reverse.css
.container {
display: flex;
flex-direction: column-reverse;
}1
2
3
4
06
Four Flex Directions
Visual comparisonrow
1
2
3
→ → →row-reverse
1
2
3
← ← ←column
1
2
3
↓ ↓ ↓column-reverse
1
2
3
↑ ↑ ↑07
Main Axis
Understand the direction of Flexbox
The flex direction determines the main axis. With
row, the main axis is horizontal. With
column, the main axis is vertical.
rowMAIN AXIS →
columnMAIN
AXIS
↓
AXIS
↓
08
Real Website Example
Responsive course card layoutresponsive-layout.css
.courses {
display: flex;
flex-direction: row;
gap: 20px;
}
@media (max-width: 600px) {
.courses {
flex-direction: column;
}
}Web page structure
Web page styling
Web page interaction
09
Flex Direction Reference
Quick revision| Value | Direction | Visual Flow | Common Use |
|---|---|---|---|
row | Horizontal | 1 → 2 → 3 | Navigation / Cards |
row-reverse | Reverse Horizontal | 3 ← 2 ← 1 | Special layouts |
column | Vertical | 1 ↓ 2 ↓ 3 | Mobile layouts |
column-reverse | Reverse Vertical | 3 ↑ 2 ↑ 1 | Special layouts |
10
Practice Task
Test your Flexbox skills🎯 Build a Responsive Course Section
Create three course cards using Flexbox. Keep them in a row on larger screens and change them into a column on smaller screens.
- Use
display: flex; - Start with
flex-direction: row; - Add a media query.
- Change the direction to
column. - Add a suitable
gap.
11
CSS Flex Direction Live Example
Run the practical exampleLIVE PREVIEW