Advance CSS layout with flexbox

Difficulty Level : Medium
Last Updated : 21 Aug, 2019

It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within container. Flexbox is different from the block model which is vertically bias and the inline which is horizontally bias. Flexbox was created for small-scales layouts and there’s another standard called grids which is geared more towards larger scale layouts, It works similar to the way to Twitter bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with flexbox firstly create a flex container. To create a flex container set the display property to flex.

Example:

.main-container {
  display: flex;
}

Flex Properties:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction: The flex-direction is used to define the direction of flexible item. The default axis is horizontal in flexbox, so the items flow into a row.

Syntax:

// Stacking flex items column wise
flex-direction: column;

// Stacking flex items from bottom to top
flex-direction: column-reverse;

// Stacking flex items row wise
flex-direction: row;

// Stacking flex items from right to left
flex-direction: row-reverse;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>flexbox</title> 
        <style> 
            .gfg_flex { 
                display: flex; 
                flex-direction: row; 
                background-color: green; 
                text-align:center; 
            } 
              
            .gfg_flex > div { 
                background-color: #f4f4f4; 
                width: 100px; 
                height:100px; 
                margin: 10px; 
                font-size: 40px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>flex-direction Property</h2> 
        <div class="gfg_flex"> 
            <div>Box A</div> 
            <div>Box B</div> 
            <div>Box C</div>  
            <div>Box D</div> 
            <div>Box E</div>  
        </div> 
    </body> 
</html>                                        

Output:
flex-direction property

flex-wrap: The flex-wrap property is used to define the wrap of flex-items. If flex-wrap property set to wrap then browser’s window set the box. If browser window is smaller than elements then elements go down to the next line.

Syntax:

// Wrap flex items when necessary
flex-wrap: wrap;

// Flex items will not wrap
flex-wrap: nowrap;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>flex-wrap property</title> 
        <style> 
            .gfg_flex { 
                display: flex; 
                flex-wrap: wrap; 
                text-align:center; 
                background-color: green; 
            } 
              
            .gfg_flex > div { 
                background-color: #f4f4f4; 
                width: 100px; 
                height:100px; 
                margin: 10px; 
                font-size: 40px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }            
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>flex-wrap Property</h2> 
        <div class="gfg_flex"> 
            <div>Box A</div> 
            <div>Box B</div> 
            <div>Box C</div>  
            <div>Box D</div> 
            <div>Box E</div> 
            <div>Box F</div>  
            <div>Box G</div> 
            <div>Box H</div> 
            <div>Box I</div>  
        </div> 
    </body> 
</html>                                            

Output:
flex-wrap property

Note: The flex-flow is a shorthand for flex-direction and flex-wrap.
Syntax:

flex-flow: row wrap;

justify-content: The justify-content property is used to align the flex items according to the main axis within a flexbox container.

Syntax:

// Aligns the flex items at the center
justify-content: center;

// The space is distributed around the flexbox items
//and it also adds space before the first item and after the last one.
justify-content: space-around;

// Space between the lines
justify-content: space-between;

// Aligns the flex items at the beginning of the container
justify-content: flex-start;

// Aligns the flex items at the end of the container
justify-content: flex-end;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>justify flexbox property</title> 
        <style> 
            .flex1 { 
                display: flex; 
                justify-content: center; 
                background-color: green; 
            } 
              
            .flex2 { 
                display: flex; 
                justify-content: space-around; 
                background-color: green; 
            } 
              
            .flex3 { 
                display: flex; 
                justify-content: space-between; 
                background-color: green; 
            } 
              
            .flex4 { 
                display: flex; 
                justify-content: flex-start; 
                background-color: green; 
            } 
              
            .flex5 { 
                display: flex; 
                justify-content: flex-end; 
                background-color: green; 
            } 
              
            .flex-items { 
                background-color: #f4f4f4; 
                width: 100px; 
                height:50px; 
                margin: 10px; 
                text-align: center; 
                font-size: 40px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }                        
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>The justify-content Property</h2> 
        <b>justify-content: center </b> 
        <div class="flex1"> 
            <div class="flex-items">1</div> 
            <div class="flex-items">2</div> 
            <div class="flex-items">3</div>  
        </div> 
        <br> 
        <b>justify-content: space-around </b> 
        <div class="flex2"> 
            <div class="flex-items">1</div> 
            <div class="flex-items">2</div> 
            <div class="flex-items">3</div>  
        </div> 
        <br> 
        <b>justify-content: space-between </b> 
        <div class="flex3"> 
            <div class="flex-items">1</div> 
            <div class="flex-items">2</div> 
            <div class="flex-items">3</div>  
        </div> 
        <br> 
        <b>justify-content: flex-start </b> 
        <div class="flex4"> 
            <div class="flex-items">1</div> 
            <div class="flex-items">2</div> 
            <div class="flex-items">3</div>  
        </div> 
        <br> 
        <b>justify-content: flex-end </b> 
        <div class="flex5"> 
            <div class="flex-items">1</div> 
            <div class="flex-items">2</div> 
            <div class="flex-items">3</div>  
        </div> 
    </body> 
</html>                                   

Output:
justify content property

align-items: This property is used to align flex items vertically according to the cross axis.
Syntax:

// Aligns the flex items in the middle of the container
align-items: center;

// Flexbox items are aligned at the baseline of the cross axis
align-items: baseline;

// Stretches the flex items
 align-items: stretch;

// Aligns the flex items at the top of the container
align-items: flex-start;

// Aligns elements at the bottom of the container
align-items: flex-end;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>align-items property</title> 
        <style> 
            .flex1 { 
                display: flex; 
                height: 200px; 
                align-items: center; 
                background-color: green; 
            } 
              
            .flex2 { 
                display: flex; 
                height: 200px; 
                align-items: baseline; 
                background-color: green; 
                } 
              
            .flex3 { 
                display: flex; 
                height: 200px; 
                align-items: stretch; 
                background-color: green; 
            } 
              
            .flex4 { 
                display: flex; 
                height: 200px; 
                align-items: flex-start; 
                background-color: green; 
            } 
              
            .flex5 { 
                display: flex; 
                height: 200px; 
                align-items: flex-end; 
                background-color: green; 
            } 
              
            .flex-items { 
                background-color: #f4f4f4; 
                width: 100px; 
                margin: 10px; 
                text-align: center; 
                font-size: 50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }         
        </style> 
    </head> 
    <body> 
    <div class = "geeks">GeeksforGeeks</div> 
    <h2>The align-items Property</h2> 
    <b>align-items: center </b> 
    <div class="flex1"> 
        <div class="flex-items">1</div> 
        <div class="flex-items">2</div> 
        <div class="flex-items">3</div>  
    </div> 
    <br> 
    <b>align-items: baseline </b> 
    <div class="flex2"> 
        <div class="flex-items">1</div> 
        <div class="flex-items">2</div> 
        <div class="flex-items">3</div>  
    </div> 
    <br> 
    <b>align-items: stretch </b> 
    <div class="flex3"> 
        <div class="flex-items">1</div> 
        <div class="flex-items">2</div> 
        <div class="flex-items">3</div>  
    </div> 
    <br> 
    <b>align-items: flex-start </b> 
    <div class="flex4"> 
        <div class="flex-items">1</div> 
        <div class="flex-items">2</div> 
        <div class="flex-items">3</div>  
    </div> 
    <br> 
    <b>align-items: flex-end </b> 
    <div class="flex5"> 
        <div class="flex-items">1</div> 
        <div class="flex-items">2</div> 
        <div class="flex-items">3</div>  
    </div> 
    </body> 
</html>                                                       

Output:
align items property

align-content: This property defines how each flex line is aligned within a flexbox and it only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.
Syntax :

// Displays the flex lines with equal space between them
align-content: space-between;

// Displays the flex lines at the start of the container
align-content: flex-start;

// Displays the flex lines at the end of the container
 align-content: flex-end;

// Dy using space-around property space will be 
// Distributed equally around the flex lines
align-content: space-around;

// Stretches the flex lines
align-content: stretch;

Example:

                        <!DOCTYPE html> 
<html> 
    <head> 
        <title>align-content property</title> 
        <style> 
            .main-container { 
                display: flex; 
                height: 400px; 
                flex-wrap: wrap; 
                align-content: space-between; 
                background-color: green; 
            } 
              
            .main-container div { 
                background-color: #f4f4f4; 
                width: 100px; 
                margin: 10px; 
                text-align: center; 
                font-size: 50px; 
            } 
            h2 { 
                text-align:center; 
            } 
            .geeks { 
                font-size:40px; 
                text-align:center; 
                color:#009900; 
                font-weight:bold; 
            }     
        </style> 
    </head> 
    <body> 
        <div class = "geeks">GeeksforGeeks</div> 
        <h2>The align-content Property</h2> 
        <div class="main-container"> 
            <div>1</div> 
            <div>2</div> 
            <div>3</div>  
            <div>4</div> 
            <div>5</div> 
            <div>6</div>  
            <div>7</div> 
            <div>8</div> 
            <div>9</div>  
            <div>10</div> 
        </div> 
    </body> 
</html>                                                                      

Output:
align content property

My Personal Notes

Related Articles

Advance CSS layout with flexbox

Start Your Coding Journey Now!