Flexbox patterns: sidebar + main + card row

The 3 layouts you'll build over and over

Pattern 1: nav bar (logo left, links right)

.nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; }

Pattern 2: sidebar + main

.layout { display: flex; min-height: 100vh; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; padding: 24px; }

Pattern 3: card row that wraps

.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 280px; min-width: 0; }       /* 280px min, grow to fill */

The flex: 1 1 280px is the "responsive card row" formula: each card is AT LEAST 280px, but they grow proportionally to fill the row. Wraps automatically.

What's hard for newcomers

• Knowing whether to use align-items (cross axis) vs justify-content (main axis).
• Remembering that flex-direction: column SWAPS which is which.
• Adding min-width: 0 to flex children that contain long unbreakable text (long URLs, code spans) — without it, the child refuses to shrink below content width and breaks the layout.

We'll see all three in capstone 14 next.