CSS
Flexbox: Responsive Header or Footer with Space Between Items
Create a flexible and responsive header or footer layout using CSS Flexbox. Items will be spaced out, and wrap onto new lines on smaller screens for optimal mobile display.
.flex-header {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to next line */
justify-content: space-between; /* Pushes items to ends, with space in between */
align-items: center; /* Vertically centers items if they have different heights */
padding: 15px 20px;
background-color: #333;
color: white;
}
.flex-header .logo {
font-size: 1.5em;
font-weight: bold;
margin-right: 20px; /* Provide some spacing if it doesn't wrap */
white-space: nowrap; /* Prevent logo from breaking */
}
.flex-header nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap; /* Allow nav items to wrap */
gap: 15px; /* Spacing between nav links */
}
.flex-header nav a {
color: white;
text-decoration: none;
padding: 5px 0;
white-space: nowrap;
}
/* Simple media query for smaller screens, though flex-wrap handles most */
@media (max-width: 600px) {
.flex-header {
flex-direction: column; /* Stack items vertically on very small screens */
justify-content: center;
align-items: center;
text-align: center;
}
.flex-header .logo {
margin-right: 0;
margin-bottom: 15px;
}
.flex-header nav ul {
justify-content: center;
}
}
/* HTML Structure */
/*
<header class="flex-header">
<div class="logo">MyBrand</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
*/
How it works: This snippet constructs a responsive header using Flexbox. `display: flex` makes it a flex container. `justify-content: space-between` places the logo at one end and the navigation at the other. `flex-wrap: wrap` ensures that if there's not enough horizontal space, items will wrap to the next line. `align-items: center` keeps everything vertically aligned. A simple media query further refines the layout for very small screens, stacking elements vertically.