CSS | flex-direction Property

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;

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

     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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

     Output:
    
 

    • 

  • column:It arrange the row  as a collumn 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

     Output:
    
 

    • 

  • column-reverse:It arrange the row  as a collumnsame 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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; 
    

            } 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

     Output:
    


    •