Skip to content
Related Articles

Related Articles

Improve Article

CSS | flex-direction Property

  • Difficulty Level : Easy
  • Last Updated : 24 Aug, 2021
Geek Week

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 arrange the row same as text direction .The default value of flex-direction is row. It is used to specify that the item has normal text direction. It makes item to follow the normal text direction in lines.
 



Syntax:

flex-direction: row; 

Example: 

html




<!DOCTYPE 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 opposite of text direction . It makes flex items in reverse order exactly the opposite of text direction as we can see in the Output. 
 

Syntax: 
 

flex-direction: row-reverse;

Example: 



html




<!DOCTYPE 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 arrange the row as a column same as text direction but top to bottom. It is used to specify that the item has normal top to bottom direction. It makes item to follow the normal top to bottom direction as we can see in the Output. 
 

Syntax:

flex-direction:column; 

Example: 
 

html




<!DOCTYPE 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 arrange the row as a column same as row-reverse bottom to top . It is used to specify that the item has normal bottom to top direction. It makes item to follow the normal bottom to top direction as we can see in the Output. 
 



Syntax:

flex-direction:column-reverse; 

Example: 
 

html




<!DOCTYPE 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>
 
<!DOCTYPE html>
 
<head>
    <title>flex-direction property</title>
    <style>
        #main {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            display: flex;
            flex-direction: column-reverse;
        }

Output: 
 

 

Supported Browsers:

  • Google Chrome 29.0
  • Internet Explorer 11.0
  • Mozilla Firefox 28.0
  • Opera 17.0
  • Safari 9.0

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :