Flexbox Layout Patterns — Practical Cheatsheet for CS50 Web Programming

"Flexbox is like arranging furniture in a tiny apartment — everything should fit, look good, and not block the door." — Your charmingly stressed web dev

You’ve already learned how to structure pages with HTML5 semantic elements (header, nav, main, aside, footer) and polished typography and color systems with CSS variables. Now let’s take those accessible, well-styled blocks and learn how to lay them out elegantly across screen sizes using Flexbox.

---

Why Flexbox matters (and when to use it)

Flexbox is built for one-dimensional layouts — either a row or a column. Use it where items should align along a single axis: navigation bars, toolbars, card rows, media objects, equal-height columns, and small page sections. For two-dimensional grids, use CSS Grid — but Flexbox remains the workhorse for component-level responsive patterns.

Where this ties to previous topics: keep semantic HTML5 structure so screen readers and SEO stay happy; use your typography scale (rem-based font sizing) and CSS variables (colors, spacing) inside your flex containers for consistent design.

---

Core properties (quick reminder)

• display: flex | inline-flex
• flex-direction: row | column | row-reverse | column-reverse
• justify-content: flex-start | center | space-between | space-around | space-evenly
• align-items: stretch | center | flex-start | flex-end | baseline
• flex-wrap: nowrap | wrap | wrap-reverse
• gap: (space between items)
• flex: (e.g., flex: 1 1 200px)
• order:
• align-self: overrides align-items for one child

Micro explanation: flex vs. width

flex controls how an item grows/shrinks relative to siblings. Don’t fight Flexbox by hard-coding widths unless you need fixed sizes.

---

Practical patterns (with HTML5 semantics and CSS)

Below are patterns you’ll use again and again. Replace color variables and font sizing with the variables you defined earlier (e.g., --primary, --gap, --type-scale).

1) Centering anything (horizontal + vertical)

HTML:

<main class="centered">
  <article>
    <h1>Centered content</h1>
    <p>Great for hero sections or modals.</p>
  </article>
</main>

CSS:

main.centered {
  display: flex;
  align-items: center;    /* vertical */
  justify-content: center;/* horizontal */
  min-height: 60vh;
  padding: var(--gap);
}

Why it works: Flexbox aligns children along main and cross axes — no magic margin tricks needed.

2) Responsive nav bar with spaced items

HTML:

<header>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>
</header>

CSS:

nav.nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between; /* pushes first/last to edges */
  align-items: center;
}

nav.nav a { padding: .5rem 1rem; }

Tip: Combine with media queries to collapse into a hamburger for narrow screens, or let items wrap: flex-wrap: wrap.

3) Two-column layout that collapses (sidebar + content)

HTML:

<main class="layout">
  <aside>Sidebar</aside>
  <section>Main content</section>
</main>

CSS:

main.layout {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  flex-wrap: wrap; /* allows stacking on small screens */
}

main.layout > aside {
  flex: 0 0 250px; /* fixed-ish sidebar */
}

main.layout > section {
  flex: 1 1 320px; /* flexible content area */
}

Responsive trick: set a min-width or flex-basis so columns collapse into stacked flow when viewport is narrow.

4) Equal-height cards in a row (card grid)

HTML:

<section class="cards">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</section>

CSS:

.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 220px; /* grows equally, wraps when needed */
  display: flex;
  flex-direction: column; /* make each card a column */
}

.card .body { flex: 1 1 auto; /* pushes footer to bottom */ }

This yields equal-height cards because each card stretches vertically while containing header/body/footer inside a column flex.

5) Holy grail layout (header, 3-column body, footer)

HTML:

<body class="page">
  <header>Site header</header>
  <div class="content">
    <aside class="left">Left</aside>
    <main>Main</main>
    <aside class="right">Right</aside>
  </div>
  <footer>Footer</footer>
</body>

CSS (concept):

.page { display: flex; flex-direction: column; min-height: 100vh; }
.content { display: flex; gap: var(--gap); flex: 1; }
.content > main { flex: 1 } /* fluid center column */
.content > aside { flex: 0 0 220px } /* fixed sidebars */

Note: The outer page uses column flex to push footer to bottom when content is short — a classic sticky footer pattern.

---

Accessibility & semantics: don’t reorder DOM for visuals

Flexbox's order can move items visually, but screen readers and keyboard users follow DOM order. Keep DOM order logical (header→main→sidebar) and only use order for purely visual tweaks. If you must change tab order, consider tabindex carefully.

Also use landmarks (nav, main, aside) for assistive tech — your flex layout shouldn’t replace semantics.

---

Responsive tips & common gotchas

• Use gap instead of margins between flex children for predictable spacing.
• Prefer flex: 1 (or flex: 1 1 auto) for equal distribution — avoid brittle pixel math.
• Use min-width on flex children to control when wrapping occurs (helps breakpoints feel natural).
• If children overflow, check flex-shrink values or set min-width: 0 on flex items to allow them to compress.
• Remember align-items: stretch by default — items will match cross-axis height unless you change it.

Why people misunderstand Flexbox: they try to micro-manage widths. Flexbox is about relationships between siblings — think relative, not absolute.

---

Quick reference table

Pattern	Key properties
Centering	display:flex; align-items:center; justify-content:center
Nav bar	display:flex; justify-content:space-between; gap:1rem
Two-column responsive	flex-wrap:wrap; aside { flex:0 0 250px } main { flex:1 }
Equal-height cards	.cards {display:flex; flex-wrap:wrap} .card {display:flex; flex-direction:column}

---

Takeaways (TL;DR)

• Flexbox = best tool for one-dimensional layout patterns (rows or columns).
• Combine semantic HTML5 elements, your typographic scale, and color variables for accessible, consistent UI.
• Use flex-basis + flex-wrap + min-width to make layouts responsively graceful.
• Prefer gap, flex shorthand, and align-items instead of manual margins and hacks.

Final memorable insight: If CSS is furniture, Flexbox is the interior designer — it doesn’t repaint the room (that’s CSS variables and typography); it just arranges things so people don’t stub their toes.

Happy flexing. Now go build a responsive nav that doesn’t collapse like a souffle in a hurricane.