Skip to main content

Flexbox Code Challenges

Test your Flexbox knowledge with progressively harder challenges. Solve each one before revealing the hints.

Challenge 1 — The Holy Grail Layout​

Build a classic three-column layout: fixed left sidebar (200px), flexible main content, fixed right sidebar (160px). The three columns should stretch to the full page height.

<div class="layout">
  <aside class="sidebar-left">Left</aside>
  <main class="main-content">Main</main>
  <aside class="sidebar-right">Right</aside>
</div>
💡 Solution Hint
.layout {
  display: flex;
  min-height: 100vh;
}
.sidebar-left  { flex: 0 0 200px; background: var(--color-surface); }
.main-content  { flex: 1; padding: 2rem; }
.sidebar-right { flex: 0 0 160px; background: var(--color-surface); }

Challenge 2 — Centered Login Card​

Center a 400px-wide login card (with padding and a form) perfectly in the middle of the viewport.

💡 Solution Hint
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
}
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

Challenge 3 — Sticky Footer​

Make the footer always stick to the bottom of the page without using position: fixed. If content is small, footer should be at the viewport bottom. If content is long, footer should follow naturally.

💡 Solution Hint
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main    { flex: 1; } /* Push footer down */
footer  { /* normal styles */ }

Challenge 4 — Navigation with Logo Left, Links Right​

Build a nav where the logo is pinned to the left and nav links are pushed to the right. On mobile, links stack below the logo.

💡 Solution Hint
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

@media (max-width: 768px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

Challenge 5 — Equal-Height Card Grid​

Create a row of 3 cards. Each card has a title, variable-length text, and a button that must always be pinned to the bottom of the card regardless of content length.

💡 Solution Hint
.card-row {
  display: flex;
  gap: 1.5rem;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.card__body { flex: 1; } /* Pushes button to bottom */
.card__btn  { margin-top: 1.5rem; }