CSS/HTML
Responsive Flexbox Navigation Bar
Build a flexible and responsive navigation bar using CSS Flexbox. Items will space evenly and wrap onto new lines on smaller screens for mobile-friendly designs.
<nav class="navbar">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Portfolio</a>
<a href="#" class="nav-item">Contact</a>
</nav>
<style>
.navbar {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to next line */
justify-content: space-around; /* Distributes space between items */
align-items: center;
background-color: #333;
padding: 10px;
gap: 10px; /* Space between flex items */
}
.nav-item {
color: white;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.nav-item:hover {
background-color: #555;
}
/* Basic responsiveness for smaller screens if items don't fit */
@media (max-width: 600px) {
.navbar {
justify-content: center; /* Center items when they wrap */
}
}
</style>
How it works: This snippet creates a responsive navigation bar using Flexbox. `display: flex` and `flex-wrap: wrap` allow navigation items to flow horizontally and wrap to the next line if the screen is too narrow. `justify-content: space-around` evenly distributes space between items, and `gap` provides consistent spacing. A media query further enhances responsiveness by centering items when they wrap on smaller screens.