Open In App

CSS flex-direction Property

Improve
Improve
Like Article
Like
Save
Share
Report

The flex-direction property is sub-property of flexible box layout module. It established the main axis of the flexible item. the main axis of the flex item is the primary axis. It’s not necessarily horizontal all the time it basically depends on the flex-direction property. 

Note:The flex property is useless when the element is not flexible item.

Syntax:  

flex-direction: row|row-reverse|column|column-reverse;

Default Value: row

Property values:

  • row: It arranges the row the same as the text direction. The default value of flex-direction is row. It is used to specify that the item has normal text direction. It makes the item follow the normal text direction in lines.

Syntax:

flex-direction: row; 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>flex-direction property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-direction: row;
        }
         
        #main div {
            width: 100px;
            height: 50px;
        }
         
        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }
         
        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>The flex-direction:row</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
 
</html>


Output: 

row-reverse: This property is used to follow the opposite of the text direction. It makes flex items in reverse order exactly the opposite of the text direction as we can see in the Output. 

Syntax: 

flex-direction: row-reverse;

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>flex-direction property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-direction: row-reverse;
        }
         
        #main div {
            width: 100px;
            height: 50px;
        }
         
        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }
         
        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>The flex-direction:row-reverse</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
 
</html>


Output: 

column: It arranges the row as a column same as the text direction but top to bottom. It is used to specify that the item has a normal top-to-bottom direction. It makes the item follow the normal top-to-bottom direction as we can see in the Output. 

Syntax:

flex-direction:column; 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>flex-direction property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
        }
         
        #main div {
            width: 100px;
            height: 50px;
        }
         
        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }
         
        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>The flex-direction:column</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
 
</html>


Output: 

column-reverse: It arranges the row as a column same as the row-reverse bottom to top. It is used to specify that the item has a normal bottom-to-top direction. It makes the item follow the normal bottom-to-top direction as we can see in the Output. 

Syntax:

flex-direction:column-reverse; 

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>flex-direction property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-direction: column-reverse;
        }
         
        #main div {
            width: 100px;
            height: 50px;
        }
         
        h1 {
            color: #009900;
            font-size: 42px;
            margin-left: 50px;
        }
         
        h3 {
            margin-top: -20px;
            margin-left: 50px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>The flex-direction:column-reverse</h3>
    <div id="main">
        <div style="background-color:#009900;">1</div>
        <div style="background-color:#00cc99;">2</div>
        <div style="background-color:#0066ff;">3</div>
        <div style="background-color:#66ffff;">4</div>
        <div style="background-color:#660066;">5</div>
        <div style="background-color:#663300;">6</div>
    </div>
</body>
 
</html>


Output: 

Supported Browsers:

  • Google Chrome 29.0
  • Edge 12
  • Mozilla Firefox 81
  • Opera 12.1
  • Safari 9.0


Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads