Vertical Alignment in a Flexbox Header

.header {
  display: flex;
  align-items: center; /* Vertically centers all direct children */
  justify-content: space-between; /* Spreads items horizontally */
  padding: 1rem;
  background-color: #f8f8f8;
}

.logo img {
  height: 40px; /* Example logo size */
  vertical-align: middle; /* Helps if logo is img element */
}

.nav ul {
  display: flex; /* Make nav links flex items too */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin-left: 1.5rem;
}

.action-button {
  padding: 0.5rem 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

How it works: This snippet shows how to use Flexbox to create a responsive header with various items vertically aligned and horizontally distributed. By setting `display: flex` and `align-items: center` on the `.header` container, all direct child elements (like a logo, navigation, and action button) are perfectly centered along the cross-axis (vertically). `justify-content: space-between` ensures items are pushed to the start, end, and distribute available space in between, making it ideal for typical header layouts. Nested flex containers can be used for more complex internal layouts, such as the navigation links.