Flex

Flex allows layout in one dimension (row or column). If we set a container's display to either flex or inline-flex, then all elements that are contained in that container will have the flex CSS applied to them.

The difference between flex and inline-flex is that:

Example showing flex and inline-flex (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>flex versus inline-flex example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;
            }

            .inlineFlex
            {
                display: inline-flex;                 
            }
            
            .flex,
            .inlineFlex
            {
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;
                height: 100px;   
            }
            
            .flex div,
            .inlineFlex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 100px;
                margin-bottom: 50px;
            }           
        </style>
    </head>
    
    <body>       
        <h4>Resize the window to see display:flex and display:inline-flex changing the layout of the flex container's content</h4>
        <div>display: flex</div>
        <div class="flex">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>

        <div class="flex">
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div> 
        
        <div>display: inline-flex</div>
        <div class="inlineFlex">
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
        </div>

        <div class="inlineFlex">
            <div>white</div>
            <div>grey</div>
            <div>black</div>
        </div>        
    </body>
</html>

flex-direction

A flex container's elements can can be organised as either a row or a column, as shown below:

 

We can use the above two flex directions along with the @media property to make response menus. We can make the menu be horrizontal for larger screens and vertical for smaller screens.

Write code to implement a responsive navigation bar, as shown here. In this example the navigation bar is horrizontal for screen resolution above 500px and vertical for lower screen resolutions.

When measuring sizes in flex boxes, we should use set the css box-sizing property to border-box for all elements using the css style *{box-sizing: border-box;}. Go online and find out why we should do this.

Elements can be added from left-to-right or right-to-left for rows and top-to-bottom or bottom-to-top for columns, as shown below:

 

Example showing flex-direction of row-reverse and reverse-column (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>flex-direction example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;                               
            }

            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 100px;
            }
            
            .rowReverse
            {
                flex-direction: row-reverse;
            }

            .column
            {
                flex-direction: column-reverse;
            }
        </style>
    </head>
    
    <body>
        <h4>Resize the window to see flex-direction changing the layout of the flex container's content</h4>
        <div>flex-direction: row-reverse</div>        
        <div class="flex rowReverse">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>

        <div>flex-direction: column-reverse</div>  
        <div class="flex column">
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
        </div>
    </body>
</html>

flex-wrap

Flex-wrap allows us to specify if elements will be forced onto one line or wrapped onto more then one line if needed.

Example showing flex-wrap: nowrap, flex-wrap:wrap and flex-wrap:wrap-reverse (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>flex-wrap example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;
                height: 100px;
            }
            
            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 500px;
            }
            
            #nowrap
            {
                flex-wrap: nowrap;
            }

            #wrap
            {
                flex-wrap: wrap;
            }

            #wrapReverse
            {
                flex-wrap: wrap-reverse;
            }

        </style>
    </head>
    
    <body>
        <h4>Resize the window to see flex-wrap changing the layout of the flex container's content</h4>
        <div>flex-wrap: nowrap</div>
        <div id="nowrap" class="flex">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>

        <div>flex-wrap: wrap</div>
        <div id="wrap" class="flex">
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
        
        <div>flex-wrap: wrap-reverse</div>
        <div id="wrapReverse" class="flex">
            <div>Seven</div>
            <div>Eight</div>
            <div>Nine</div>
        </div>
    </body>
</html>

Write code to display three equally sized columns that responsively change for screens of resolution less than 500px, as shown here.

Write code to display two unequally sized columns that responsively change for screens of resolution less than 500px, as shown here.

Write code to display the responsive webpage shown here. Adjust the size of the browser window to see the webpage.

Write code to display a responsive image gallery, as shown here.

flex-flow

This is shorthand for combining flex-direction and flex-wrap.

Example showing flex-flow (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>flex-flow example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;
                flex-flow: row wrap;
                
                border:thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;                
            }         

            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 400px;
            }            
        </style>
    </head>
    
    <body>
        <h4>Resize the window to see flex-flow changing the layout of the flex container's content</h4>    
        <div>flex-flow: row wrap</div>
        <div class="flex">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>        
    </body>
</html>

justify-content

Items can be aligned horrizontally across a flex container. Some of the properties that can be used to align items horizontally are:

Example showing flex justify-content property (Run Example)
<!DOCTYPE html>
<html>
    <head>
        <title>flex jusitfy-direction example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex; 
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;
                height: 100px;
            }   
            
            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 100px;
            }
            
            .spaceAround
            {
                justify-content: space-around;
            }
            
            .spaceBetween
            {
                justify-content: space-between;
            }
            
            .spaceEvenly
            {
                justify-content: space-evenly;
            }
        </style>
    </head>
    
    <body>
        <h4>Resize the window to see justify-content changing the layout of the flex container's content</h4>    
        <div>justify-content: space-around</div>
        <div class="flex spaceAround">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>        

        <div>justify-content: space-between</div>
        <div class="flex spaceBetween">
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
        </div>
        
        <div>justify-content: space-evenly</div>
        <div class="flex spaceEvenly">
            <div>Alpha</div>
            <div>Beta</div>
            <div>Theta</div>
        </div>        
    </body>
</html>

Write code to fill the screen with three columns of equal width, as shown here. Try to use justify-content: space-between to place a gap between the columns. You will find that it will not work.

Try using margin to place spaces between the three columns, as shown here.

Gap

Gap is used to force fixed sized gaps to be placed between the items in a flex. Gap only places spaces between items. It does not place a gap between items and the edge.

Example showing a gap between each of three columns (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            * 
            {
                box-sizing:border-box;
            }

            #columns_container 
            {
                display:flex;    
                gap:50px;
            }   
            
            .column
            {
                flex:1;
                border: thin solid red;
                min-height: 500px;
            }
        </style>
    </head>

        <body>
        <div id="columns_container">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
    </body>
</html>

Write code to display responsive columns, as shown here.

In the example above, the column heights are not the same. Write code to display responsive columns, where the content in all columns is spread out so that all columns are equal height, as shown here.

align-item

Items can be aligned vertically down a flex container. Some of the properties that can be used to align items vertically are:

Example showing flex align-item property (Run Example)
<!DOCTYPE html>
<html>
    <head>
        <title>flex align-items example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;   
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;
                height: 100px;
            }   
            
            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 100px;              
            }
            
            .stretch
            {
                align-items: stretch;
            }
            
            .start
            {
               align-items: flex-start;
            }
            
            .end
            {
               align-items: flex-end;
            }
        </style>
    </head>
    
    <body>
        <div>align-items: stretch</div>        
        <div class="flex stretch">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>       
        
        <div>align-items: flex-start</div>  
        <div class="flex start">
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
        </div>
        
        <div>align-items: flex-end</div>  
        <div class="flex end">
            <div>Alpha</div>
            <div>Beta</div>
            <div>Theta</div>
        </div>        
    </body>
</html>

align-content

When the items wrap onto more then one line, this property is used to align the lines and fill the spaces between the lines. Properties include:

Example showing flex align-content property (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <title>flex align-content example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex
            {    
                display: flex;   
                flex-wrap: wrap;
                border: thin solid #cccccc;
                background-color: #ffffaa;
                margin-bottom: 50px;
                height: 150px;
            }   
            
            .flex div
            {
                border: thin solid red;
                background-color: #ffaaaa;
                width: 100px;                  
            }
            
            .spaceBetween
            {
                align-content: space-between;
            }
            
            .spaceAround
            {
               align-content: space-around;
            }
            
            .spaceEvenly
            {
               align-content: space-evenly;
            }

            .stretch
            {
               align-content: stretch;
            }
        </style>
    </head>
    
    <body>
        <h4>Resize the window to see align-content changing the layout of the flex container's content</h4>
        <div>align-content: space-around</div>        
        <div class="flex spaceAround">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
            <div>Eight</div>
            <div>Nine</div>
            <div>Ten</div>
        </div>        

        <div>align-content: space-evenly</div>          
        <div class="flex spaceEvenly">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
            <div>Eight</div>
            <div>Nine</div>
            <div>Ten</div>
        </div> 
        
        <div>align-content: stretch</div>  
        <div class="flex stretch">
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
            <div>Eight</div>
            <div>Nine</div>
            <div>Ten</div>
        </div>          
    </body>
</html>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>