Flexbox is a powerful layout model in CSS that makes it easy to arrange elements on a web page. It helps you control the alignment, direction, and sizing of elements within a container. Flexbox is especially useful for creating responsive designs that adapt to different screen sizes and orientations. In simpler terms, Flexbox helps you organize and position elements on your web page in a flexible and efficient way.

In this lesson, we will learn the basics of Flexbox and use it to create a simple navigation bar. By the end of this lesson, you'll have a better understanding of how Flexbox works and how to use it in your own projects.

In this step, we will create add a <div> element that will act as our Flex container. Inside the container, add four <a> elements that will serve as navigation links. Your code should look like this:

<div id="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

​

​

In this step, we will add some basic CSS to style our navigation bar. Add the following CSS code:

#navbar {
  background-color: #333;
  padding: 10px;
}

#navbar a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

This code sets the background color of the navbar to a dark gray (#333) and adds 10 pixels of padding around the navbar. The navigation links are styled with a white color, no text decoration (removing the default underline), and 8 pixels of padding on the top and bottom, and 16 pixels on the left and right. When a user hovers over a navigation link, the background color changes to a light gray (#ddd) and the text color changes to black, creating a visual effect that indicates the link is interactive.

xxxxxxxxxx

<div id="navbar">

  <a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Contact</a>

</div>

​

In this step, we will make the <div> element a Flex container by setting its display property to flex. This will arrange all the direct children of the Flex container as Flex items, following the Flexbox layout rules.

Add the following CSS code:

#navbar {
  background-color: #333;
  padding: 10px;
  display: flex; /*add this*/
  flex-direction: column; /*add this*/
}

xxxxxxxxxx

<div id="navbar">

  <a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Contact</a>

</div>

xxxxxxxxxx

#navbar {

  background-color: #333;

  padding: 10px;

}

​

#navbar a {

  color: white;

  text-decoration: none;

  padding: 8px 16px;

}

​

#navbar a:hover {

  background-color: #ddd;

  color: black;

}

By default, Flex items are placed in a row. You can change the direction using the flex-direction property.

You can also use row, column, row-reverse, or column-reverse as values for the flex-direction property.

In this step, we will align the navigation links using the justify-content property. This property helps to align and distribute Flex items within the container. Change your CSS code to the following:

#navbar {
  background-color: #333;
  padding: 10px;
  display: flex;
  flex-direction: row; /*change this*/
  justify-content: flex-end; /*add this*/
}

This code evenly distributes the space between the Flex items, creating a balanced navigation bar. You can also use other values like flex-start, flex-end, center, or space-around.

xxxxxxxxxx

<div id="navbar">

  <a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Contact</a>

</div>

xxxxxxxxxx

#navbar {

  background-color: #333;

  padding: 10px;

  display: flex;

  flex-direction: column;

}

​

#navbar a {

  color: white;

  text-decoration: none;

  padding: 8px 16px;

}

​

#navbar a:hover {

  background-color: #ddd;

  color: black;

}