Flex Box – display: flex
Flex Box is a CSS layout module that is enabled when you set flex in the display property. When you set display: flex for the parent element, the parent element becomes a flex container while the child elements become flex items, which are horizontally laid out by default.
Additional Properties
Setting display: flex to the parent element is just making the parent element a flex container and the child elements flex items. You can customize how Flex Box should behave by using additional properties. The properties below are key properties that work in Flex Box Layout:
flex-directionflex-wrapjustify-contentalign-itemsalign-contentalign-selfflex-growflex-shrinkflex-basis
We'll explain these properties one by one in this chapter.
Practice
Objective:
Practice to create a flex box layout
1. Create a new HTML file for this chapter
- Create a copy of the chapter14.html file and change the name to chapter15.html.
- Change the
<title>section to 15. CSS: Layout – Flex Box. - Also, delete the existing content of the
<body>element that was created in the previous chapter. - Add the
<h1>tag to show the chapter title at the top of the page. - The code should look like the one below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Google Font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Custom CSS-->
<link rel="stylesheet" href="css/practice.css">
<title>15. CSS: Layout – Flex Box</title>
</head>
<body>
<h1>Chapter 15. CSS: Layout – Flex Box</h1>
</body>
</html>
2. Update the body section
Add the code below in the <body> section of the HTML file. We are adding the flex-container and flex-item classes to add basic styles to each element.
<h2>Flex Box</h2>
<h3>Original</h3>
<div class="flex-container">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
</div>
<h3 style="display: inline-block;">display: flex</h3>
<div class="flex-container" style="display: flex;">
<div class="flex-item">item 1</div>
<div class="flex-item">item 2</div>
<div class="flex-item">item 3</div>
<div class="flex-item">item 4</div>
<div class="flex-item">item 5</div>
<div class="flex-item">item 6</div>
</div>
<hr>
3. Update the CSS file
Open the practice.css file and add new code for adding styles to the flex-container and flex-item classes. As this is the start of the chapter, add a comment upfront for code readability.
/* Chapter 15. CSS: Layout – Flex Box */
.flex-container{
border: solid #23ACBB;
width: 300px;
padding: 15px;
margin:10px;
}
.flex-item{
margin: 5px;
padding: 5px;
background-color: #B3EBEF;
text-align: center;
box-sizing: border-box;
border-radius: 5px;
}
4. Check the result with a browser
- Open chapter15.html with a browser.
- You can see that
display: flexcreates Flex Box layout.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.
More Topics to Explore
Home (Landing) Page Development
Website Structure Design
Frontend Coding
