CSS
Creating a Responsive Flexbox Navigation Bar
Build a flexible and responsive navigation bar that adapts gracefully to different screen sizes using CSS Flexbox for efficient item distribution and alignment.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
color: white;
}
.navbar-brand {
font-size: 1.5em;
font-weight: bold;
}
.navbar-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar-nav li a {
color: white;
text-decoration: none;
padding: 8px 15px;
display: block;
}
.navbar-nav li a:hover {
background-color: #555;
border-radius: 4px;
}
How it works: This code creates a responsive navigation bar. The `.navbar` container uses `display: flex;` with `justify-content: space-between;` to push the brand to one side and navigation links to the other. `align-items: center;` vertically centers them. The `.navbar-nav` also uses `display: flex;` to arrange its list items horizontally.