Putting It All Together

Let's create a classic navigation that adapts to screen without media queries (almost).

.navbar {
  display: flex;
  flex-wrap: wrap; /* Allow wrap on mobile */
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  gap: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  flex: 1 1 300px; /* Grow, shrink, but basis 300px */
}

.logo {
  font-weight: bold;
  font-size: 1.5rem;
}

.nav-item {
  list-style: none;
  white-space: nowrap; /* So menu items don't break in half */
}

Magic Breakdown:

• flex-wrap: On narrow screen, menu will just " fall " under the logo.
• flex: 1 1 300px: If space is less than 300px, links block will move to new line and take full width there.
• gap: Perfect distances without margins on edge elements.