Flexbox

Flexbox allows layout in one dimension (row or column). If we set a container's display to either flex or inline-flex, then that container becomes a flexbox and all elements that are contained in that container will have the flexbox 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 flexbox can be either a row or a column. Items 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 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;
            }
        </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</div>  
        <div class="flex column">
            <div>Red</div>
            <div>Green</div>
            <div>Blue</div>
        </div>
    </body>
</html>

Write code to test the other flex-direction property values.

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>

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>

Write code to test the other flex-flow property values.

justify-content

Items can be aligned within a flexbox container. The following are some of the values that can be used with the justify-content property:

Example showing flexbox 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>

Go online and find the other justify-content property values.

Write code to test the other justify-content property values.

align-items

This defines the behavior for how flex items are laid out along the axis that is perpendicular to the main-axis (i.e. the cross-axis). Some of the properties that cane be used to align items along the cross-axis are:

Example showing flexbox 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>

Go online and find the other align-items property values.

Write code to test the other align-items property values.

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

Go online and find the other align-content property values.

Write code to test the other align-content property values.

Go online and explain what the "safe" and "unsafe" property values are.

Write code to test the "safe" and "unsafe" property values with various flexbox property values.

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