CSS
Responsive Navigation Bar with Flexbox Wrap
Create a flexible and responsive navigation bar that automatically wraps menu items to the next line on smaller screens, maintaining proper spacing.
.navbar {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
justify-content: space-between; /* Distributes items with space between them */
align-items: center; /* Aligns items vertically in the center */
gap: 1em; /* Provides space between items, even when they wrap */
padding: 10px 20px;
background-color: #333;
color: white;
}
.navbar-logo {
margin-right: auto; /* Pushes other items to the right */
}
.navbar-links a {
color: white;
text-decoration: none;
padding: 5px 10px;
white-space: nowrap; /* Prevents individual links from breaking */
}
How it works: This snippet outlines a responsive navigation bar layout using Flexbox. Setting `display: flex;` on `.navbar` enables flex behaviors. `flex-wrap: wrap;` is crucial, allowing navigation links to flow onto new lines if the container width is insufficient. `justify-content: space-between;` evenly distributes items, placing the first item at the start, the last item at the end, and remaining items with equal space between them. The `gap` property ensures consistent spacing between all flex items, whether they are on the same line or wrapped.