Making Flexbox Layouts Responsive — flex-wrap and Stacking Behavior

This lesson is the synthesis of two modules: Module 05’s Flexbox properties and Module 06’s responsive design techniques. You will apply both together to build a STO layout that works correctly at every width from 320px to 1440px.

The responsive Flexbox pattern

Every responsive Flexbox component follows the same pattern:

1. Mobile default — flex-direction: column, full-width items, minimal spacing
2. Tablet breakpoint — flex-direction: row, flex-wrap: wrap, multiple items per row
3. Desktop breakpoint — optional refinement of item sizing or spacing

/* Mobile: single column */
.component {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tablet and above: row with wrapping */
@media (min-width: 768px) {
  .component {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
}

The beauty of this pattern is that flex-wrap: wrap handles the intermediate cases automatically — at 600px, more items fit per row than at 400px, and the browser figures out the count from the items’ flex-basis.

The STO navigation

Mobile default — logo stacked above nav links in a column:

.site-header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #2c4a1e;
}

.site-logo {
  color: #f5f0eb;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 0.5rem;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-nav a {
  color: #f5f0eb;
  text-decoration: none;
  font-weight: 600;
  padding: 0.25rem 0;
}

Tablet and above — horizontal row, logo left, nav right:

@media (min-width: 768px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
  }

  .site-logo {
    padding-bottom: 0;
  }

  .site-nav {
    flex-direction: row;
    gap: 2rem;
  }
}

The STO tour card grid

Mobile default — single column, full-width cards:

.tours-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 1rem;
}

.tour-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e0ddd8;
  border-radius: 8px;
  overflow: hidden;
}

Tablet — two cards per row:

@media (min-width: 600px) {
  .tours-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .tour-card {
    flex: 1 1 calc(50% - 0.75rem); /* two per row, accounting for gap */
  }
}

Desktop — three cards per row:

@media (min-width: 1024px) {
  .tour-card {
    flex: 1 1 calc(33.333% - 1rem); /* three per row */
  }
}

Alternatively, the simpler flex: 1 1 280px approach from Module 05 works without the calc():

@media (min-width: 600px) {
  .tours-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .tour-card {
    flex: 1 1 280px; /* browser determines how many fit */
    max-width: 400px;
  }
}

Use whichever approach makes sense for your design — calc() gives you precise column counts; flex-basis gives you content-driven wrapping.

Image responsiveness

One rule makes all images scale within their containers:

img {
  max-width: 100%;
  height: auto;
}

Add this to the top of your stylesheet as a global rule. It applies to every image on every page. max-width: 100% prevents an image from overflowing its container. height: auto preserves the image’s aspect ratio as its width scales.

This is the single most important CSS rule for responsive media.

Testing responsiveness

Use Chrome DevTools Device Toolbar to test at each breakpoint:

1. 375px — mobile: nav stacked, cards in a single column
2. 600px — small tablet: cards shift to two per row
3. 768px — tablet: nav switches to horizontal row
4. 1024px — laptop: cards show three per row

Use the responsive slider (drag the edge of the device frame) to find where the layout starts to look wrong — that is where a breakpoint might be needed.

Common responsive debugging mistakes

Forgetting the viewport meta tag — media queries work in DevTools but not on a real phone. Always check that <meta name="viewport" content="width=device-width, initial-scale=1"> is in every HTML file.

Fixed px widths on containers — width: 1100px will always cause overflow on smaller screens. Use width: 90%; max-width: 1200px instead.

Applying layout CSS before the mobile base works — test your mobile base styles first (no media queries) before adding breakpoints. The mobile default should be a complete, usable layout on its own.

Using px for font sizes — if a user increases their browser base font size, px values do not scale. Use rem throughout so the type scale respects user preferences.

The complete Module 06 recap

You now have a fully responsive STO site built on three pillars:

Fluid layouts — Flexbox with flex-wrap, % widths, rem spacing, and max-width containers that adapt to any viewport without breaking.

Flexible media — img { max-width: 100%; height: auto; } applied globally so images always scale.

Media queries — mobile-first min-width breakpoints at 600px, 768px, and 1024px that progressively enhance the layout from a one-column mobile base to a multi-column desktop layout.

Breakpoint	Navigation	Tour cards
Mobile (< 600px)	Stacked column	1 per row
Small tablet (≥ 600px)	Stacked column	2 per row
Tablet (≥ 768px)	Horizontal row	2 per row
Desktop (≥ 1024px)	Horizontal row	3 per row

Module 07 is the capstone: Styling Summit Trail Outfitters End-to-End. Every technique from this course — color, typography, the box model, Flexbox, and responsive design — comes together into the complete, polished STO site.