CSS
Responsive Flexbox Navigation with Wrapping
Build a flexible navigation menu that distributes items evenly and wraps onto multiple lines on smaller screens using CSS Flexbox, maintaining readability and responsiveness.
.navbar {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
justify-content: space-between; /* Distribute items with space between them */
list-style: none;
padding: 10px;
background-color: #333;
margin: 0;
}
.nav-item {
flex-basis: auto; /* Allow items to determine their own size */
margin: 5px 10px;
}
.nav-item a {
color: white;
text-decoration: none;
padding: 5px 10px;
display: block;
}
How it works: This snippet creates a responsive navigation bar using Flexbox. `display: flex` makes the list items flex items. `flex-wrap: wrap` allows items to move to the next line when space is insufficient, crucial for responsiveness. `justify-content: space-between` distributes items along the main axis, putting space between them. `flex-basis: auto` lets items take their natural size, and margins provide internal spacing.