Learning Flexbox: Building a basic Navigation Bar

Flexbox is a way to arrange items in a row or column. It helps to make layouts flexible and responsive by letting you control how items are spaced and aligned. With flexbox, you can easily adjust the layout of your webpage without complicated coding. It is a easy tool to arrange things neatly on your website.

Getting Started with HTML:

To start with, let's set up our HTML structure for navigation bar:

<nav class="navbar">
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Styling with Flexbox:

Now, let's apply flexbox to style our navigation bar. We'll use CSS to define the layout and alignment of the elements within the navbar:

* {
   margin: 0%;
   padding: 0%;
  }
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}
.nav-links {
  display: flex;
  list-style: none;
}
.nav-links li {
  margin-right: 20px;
}
.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

• We set the .navbar to display: flex; to make its direct children flex items.

• justify-content: space-between; aligns the logo to the left and the navigation links to the right, creating space between them.

• align-items: center; vertically centers the elements within the navbar.

• The .nav-links class sets the navigation links to display as flex items horizontally.

• list-style: none; removes the default list styling.

• Margins are applied to the list items for spacing between them, and the last item has its margin removed to prevent extra spacing at the end.

  Conclusion:

  With flexbox you can easily make your own navigation bar look nice by using just simple commands like: "display: flex;" and "justify-content" and many like "flex-direction", "flex-wrap", also you can use gap too. You can add different properties and value to customize the look of your navigation bar to match your own style.

  ! Happy Coding ! 🚀

  Here is the link for my navigation bar:

  https://my-projects-navigation-bar.vercel.app/