CssHow-ToBeginner · 4 min read

How to Create Navbar Using Flexbox: Simple CSS Guide

To create a navbar using flexbox, set the container's display property to flex and use justify-content to align items horizontally. Use align-items to center them vertically and add spacing with gap or margins.

📐

Syntax

Use display: flex; on the navbar container to arrange its child items in a row. justify-content controls horizontal alignment, and align-items controls vertical alignment.

display: flex; - activates flexbox layout
justify-content: space-between; - spaces items evenly with first and last at edges
align-items: center; - vertically centers items
gap: 1rem; - adds space between items

css

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #333;
  color: white;
}

💻

Example

This example shows a simple horizontal navbar with links spaced evenly and centered vertically using flexbox.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flexbox Navbar Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #004080;
    padding: 1rem 2rem;
  }
  .logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
  }
  ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
  }
  li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
  }
  li a:hover {
    text-decoration: underline;
  }
</style>
</head>
<body>
  <nav>
    <div class="logo">MySite</div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Output

A horizontal navbar with a blue background, white text, a bold site name on the left, and four navigation links spaced evenly on the right, all vertically centered.

⚠️

Common Pitfalls

Common mistakes when creating a flexbox navbar include:

Not setting display: flex; on the container, so items stay stacked vertically.
Forgetting to remove default ul padding and margin, causing unwanted spacing.
Using fixed widths on items that break responsiveness.
Not centering items vertically with align-items: center;, making the navbar look uneven.

Always test your navbar on different screen sizes to ensure it stays usable and neat.

css

/* Wrong: No flex display, default list styles */
ul {
  /* no display flex */
  margin: 20px;
  padding: 20px;
  list-style: disc;
}

/* Right: Flex display and reset list styles */
ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
}

📊

Quick Reference

Remember these key CSS properties for a flexbox navbar:

display: flex; - activates flex layout
justify-content - controls horizontal spacing (e.g., space-between, center)
align-items: center; - vertical alignment
gap or margins - space between items
Reset list styles on ul with margin: 0;, padding: 0;, and list-style: none;

✅

Key Takeaways

Use display: flex; on the navbar container to arrange items horizontally.

Center items vertically with align-items: center; for a balanced look.

Use justify-content to control spacing between navbar items.

Remove default list styles and spacing on ul for clean layout.

Test your navbar on different screen sizes to ensure responsiveness.