Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

Tag:

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-direction
flex-wrap
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex-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.

chapter15.html

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

chapter15.html

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

practice.css

/* 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: flex creates Flex Box layout.

You can also check the sample result here (Demo Site ).

demo code

Additional Properties

flex-direction
flex-wrap
justify-content
align-items
align-content
align-self
flex-grow
flex-shrink
flex-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.

chapter15.html

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

chapter15.html

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

practice.css

/* 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;
}