CSS Flexbox - flex-direction Property
CSS flex-direction property determines the direction in which flex items are placed within a flex container. Flex items can be arranged either in a horizontal row or a vertical column.
Possible Values
-
row − The main-axis of the flex container follows the direction of the text. The main-start and main-end points align with the direction of the content.
-
row-reverse − Same as row value, but the main-start and main-end points along the main axis are reversed compared to the content direction.
-
column − The main axis of the flex container is the same as the block axis. The main-start and main-end points correspond to before and after points in the writing mode.
-
column-reverse − Same as column but the main-start and main-end points are in the reversed direction of the content flow.
Applies to
Flex containers
Syntax
flex-direction: row|row-reverse|column|column-reverse;
CSS flex-direction - row Value
The following example demonstrates that flex-direction: row property arranges flex items in horizontal direction, from left to right.
<html> <head> <style> .flex-container { display: flex; flex-direction: row; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> </body> </html>
CSS flex-direction - row-reverse Value
The following example demonstrates that flex-direction: row-reverse property arranges flex items in horizontal direction but in a reversed order, from right to left −
<html> <head> <style> .flex-container { display: flex; flex-direction: row-reverse; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> </body> </html>
CSS flex-direction - column Value
The following example demonstrates that flex-direction: column property arranges flex items in vertical direction, from top to bottom −
<html> <head> <style> .flex-container { display: flex; flex-direction: column; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> </body> </html>
CSS flex-direction - column-reverse Value
The following example demonstrates that flex-direction: column-reverse property arranges flex items in vertical direction but in a reversed order, from bottom to top −
<html> <head> <style> .flex-container { display: flex; flex-direction: column-reverse; background-color: green; } .flex-container div { background-color: yellow; padding: 10px; margin: 5px; width: 75px; height: 50px; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google