CSS
Building a Responsive Flexbox Navbar
Create a flexible and responsive navigation bar that adapts gracefully to different screen sizes, using Flexbox properties like `justify-content` and `flex-wrap` for optimal layout.
.navbar {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
justify-content: space-between; /* Distributes items and pushes ends to edges */
align-items: center; /* Vertically aligns items in the center */
padding: 10px 20px;
background-color: #333;
color: white;
}
.navbar-logo {
font-size: 1.5em;
margin-right: 20px;
}
.navbar-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-links li {
margin-left: 15px;
}
.navbar-links a {
color: white;
text-decoration: none;
padding: 5px 10px;
display: block;
}
/* Basic responsiveness for smaller screens */
@media (max-width: 600px) {
.navbar {
flex-direction: column; /* Stack items vertically */
align-items: flex-start;
}
.navbar-logo {
margin-bottom: 10px;
}
.navbar-links {
width: 100%;
flex-direction: column; /* Stack links vertically */
align-items: flex-start;
}
.navbar-links li {
margin: 5px 0;
}
}
How it works: This snippet creates a responsive navigation bar using Flexbox. `display: flex` makes it a flex container. `flex-wrap: wrap` allows nav items to wrap onto a new line if the container shrinks. `justify-content: space-between` places the logo at one end and links at the other. A media query demonstrates stacking items vertically on smaller screens using `flex-direction: column` for basic responsiveness.