Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Flex allows layout in one dimension. If we set a container's display property to flex , then all elements that are contained in that container will have the flex CSS applied to them. Set a container's display property to flex using the css below:
display: flex;
Note that flex use to be called flexbox. The two are used interchangably. Therefore, any reference to flexbox that you come across on the www is actually refering to flex.
When measuring content element sizes using flex, we should use set the css box-sizing property to border-box for all elements using the css style below:
*
{
box-sizing: border-box;
}
Go online and find out what box-sizing: border-box does.
The elements that are held in a flex container can be displayed in a row or in a column, as shown below:
Example showing flex-direction (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.0">
<style>
*
{
box-sizing: border-box;
}
.flex_container
{
display: flex;
}
.flex_container div
{
border: thin solid red;
background-color: #ffffaa;
}
.horizontal
{
flex-direction: row;
}
.vertical
{
flex-direction: column;
}
</style>
</head>
<body>
<div class="flex_container horizontal">
<div>Column One</div>
<div>Column Two</div>
<div>Column Three</div>
</div>
<br>
<div class="flex_container vertical">
<div>Row One</div>
<div>Row Two</div>
<div>Row Three</div>
</div>
</body>
</html>
The space taken up by each element in a row of elements can be set using the flex property. Flex will cause the content elements to be spread across the available screen width. We apply the flex property to the content elements (not the container <div>).
If we want the various content elements to be different widths, then we can set each content element's flex to be the fraction of the available width that this element takes up. We can use percentages (%) instead of fractions.
If all the content containers have the same flex value, then they will all be the same size.
Flex sizing is shown in the example below (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;
}
.container
{
display: flex;
}
.container div
{
border: thin solid red;
background-color: #ffffaa;
}
.equal_sized_content
{
flex: 1;
}
#skinny_content
{
flex: 1;
}
#fat_content
{
flex: 4;
}
</style>
</head>
<body>
<div class="container">
<div class="equal_sized_content">Equal sized content One</div>
<div class="equal_sized_content">Equal sized content Two</div>
</div>
<br>
<div class="container">
<div id="skinny_content">Skinny content</div>
<div id="fat_content">Fat content</div>
</div>
</body>
</html>
Adjust the code above to change the value of the "equal_sized_content" flex from 1 to 2. Why does this make no difference to the output?
Solution:
Because the ratio of the fractions that each element is assigned remains the same.
Adjust the code above to see what happens if you try to replace the value of the "skinny_content" flex with 2.
Write code to display two unequally sized columns that responsively change for screens of resolution less than 500px, as shown here.
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.
By placing a navigation bar in an iFrame, the same menu can be used on multiple pages. Adjust the code above so that the same menu is visible in four webpages, as shown here.
Write code to display the responsive webpage shown here. Adjust the size of the browser window to see the webpage.
Gap is used to recommend a minimum sized gaps that should 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 of the cotainer.
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;
}
#container
{
display: flex;
gap: 50px;
}
#container div
{
flex: 1;
border: thin solid #aaaaaa;
background-color: #ffffaa;
min-height: 300px;
}
</style>
</head>
<body>
<div id="container">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
</body>
</html>
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 (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.0">
<style>
.container
{
display: flex;
gap: 5px;
}
.container div
{
border: thin solid #aaaaaa;
background-color: #ffffaa;
min-width: 300px;
}
#wrap
{
flex-wrap: wrap;
}
#nowrap
{
flex-wrap: nowrap;
}
</style>
</head>
<body>
<p>Each content element has been set to have a width of 300px. Resize the window to see flex-wrap changing the layout of the flex container's content</p>
<h4>flex-wrap: wrap</h4>
<p>If there is not enough room on the screen, the next content element will display on the next line.</p>
<div id="wrap" class="container">
<div>Wrap One</div>
<div>Wrap Two</div>
<div>Wrap Three</div>
<div>Wrap Four</div>
<div>Wrap Five</div>
</div>
<br>
<h4>flex-wrap: nowrap</h4>
<p>All content elements will always display on the same line.</p>
<div id="nowrap" class="container">
<div>Nowrap One</div>
<div>Nowrap Two</div>
<div>Nowrap Three</div>
<div>Nowrap Four</div>
<div>Nowrap Five</div></div>
</body>
</html>
Write code to display a responsive image gallery, as shown here. Note, you should lazy load the images.
Write code to display responsive columns, as shown here.
Items can be aligned horrizontally across a flex container. Some of the properties that can be used to align items horizontally are:
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container
{
display: flex;
border: thin solid #cccccc;
background-color: #ffffaa;
margin-bottom: 50px;
}
.container div
{
border: thin solid red;
background-color: #ffaaaa;
min-width: 100px;
min-height: 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="container" id="spaceAround">
<div>Space Around One</div>
<div>Space Around Two</div>
<div>Space Around Three</div>
</div>
<div>justify-content: space-between</div>
<div class="container" id="spaceBetween">
<div>Space Between One</div>
<div>Space Between Two</div>
<div>Space Between Three</div>
</div>
<div>justify-content: space-evenly</div>
<div class="container " id="spaceEvenly">
<div>Space Evenly One</div>
<div>Space Evenly Two</div>
<div>Space Evenly Three</div>
</div>
</body>
</html>
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.
Adjust the code above so that the space between the title and the image is always the same, as shown here.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.