Flex Direction in CSS
From the CSS Flexbox cheat sheet · Flex Container · verified Jul 2026
Flex Direction
Set the main axis direction to control how flex items flow within the container
css
.container {
flex-direction: row; /* → left to right */
flex-direction: row-reverse; /* ← right to left */
flex-direction: column; /* ↓ top to bottom */
flex-direction: column-reverse; /* ↑ bottom to top */
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>🎨 Row
1
2
3
🎨 Column
1
2
3
➡️ Sets main axis direction
🔄 Changes item flow
📱 Use media queries for responsive
Continue with CSS Flexbox
Save the full cheat sheet or work through every related task.