<!-- Start with vertical stacking for mobile -->
.container {
  display: flex;
  flex-direction: column;  /* stack on mobile -->
  gap: 20px;
}

.item {
  flex: 1;
}

<!-- Add desktop layout in media query -->
@media (min-width: 768px) {
  .container {
    flex-direction: row;  /* side-by-side on desktop -->
  }

  .item {
    flex: 1;
  }
}

<!-- Even simpler: use flex-wrap -->
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 100%;  /* full width on mobile -->
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 calc(50% - 10px);  /* two columns on tablet -->
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 calc(33.333% - 14px);  /* three columns on desktop -->
  }
}

<!-- Flex-wrap with flex-basis creates responsive layout -->
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 250px;
  /* min: 250px, grows to fill, wraps when needed -->
}

<!-- On 320px: 1 column (320 > 250)
     On 600px: 2 columns (600/2 = 300 > 250)
     On 1200px: 4 columns (1200/4 = 300 > 250)
     All without media queries! -->

/* Clamp for smooth responsive sizing -->
.item {
  flex: 1 1 clamp(250px, 25vw, 400px);
  /* Between 250-400px, scales with viewport -->
}

/* Gap that scales with viewport -->
.container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 30px);
  /* Gap scales: 10px at narrow, 30px at wide -->
}

<!-- Responsive navigation -->
<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="nav-items">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="actions">
    <button>Sign Up</button>
  </div>
</nav>

/* Mobile: vertical navigation */
.navbar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tablet: horizontal navigation */
@media (min-width: 768px) {
  .navbar {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .nav-items {
    flex-direction: row;
    flex: 1;
    justify-content: center;
  }

  .actions {
    flex: 0 0 auto;
  }
}

<!-- Responsive card grid -->
<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 100%;  /* full width on mobile */
  min-width: 250px;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

@media (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 10px);  /* two columns */
  }
}

@media (min-width: 1000px) {
  .card {
    flex: 1 1 calc(25% - 15px);  /* four columns */
  }
}

<!-- Reorder items on mobile vs desktop -->
<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Content</main>
</div>

/* Mobile: content first -->
.sidebar {
  order: 2;
  flex: 1 1 100%;
}

.content {
  order: 1;
  flex: 1 1 100%;
}

/* Desktop: sidebar on side -->
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }

  .sidebar {
    order: 1;
    flex: 0 0 250px;
  }

  .content {
    order: 2;
    flex: 1;
  }
}

<!-- Hide/show elements responsively -->
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .desktop-only {
    display: flex;
  }
}

.mobile-only {
  display: flex;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

/* Prefer flex-wrap over hiding items -->
/* Don't do this: hide items with display: none -->
.item {
  display: none;
}

@media (min-width: 768px) {
  .item {
    display: flex;
  }
}

/* Better: use flex-basis and wrapping -->
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 100%;  /* mobile */
}

@media (min-width: 768px) {
  .item {
    flex: 1 1 50%;  /* tablet -->
  }
}

/* Minimize layout shifts -->
/* Use aspect-ratio to reserve space -->
.card {
  aspect-ratio: 16 / 9;
}

/* Layout doesn't shift when image loads -->

/* Use gap instead of margin -->
.flex {
  gap: 20px;  /* consistent, no edge cases -->
}

/* Not margin: 20px which creates edge spacing -->