CSS Flexbox Complete Guide: Properties, Examples & Cheat Sheet (2026)

 

The Complete CSS Flexbox Guide with Practical, Real-World Examples

Published on Websofttuts | Category: CSS & Layout | Difficulty: Beginner–Intermediate

---

You've Been Fighting Your Layout. Flexbox Ends That.

You know the drill. You need to center a <div>. Simple, right? An hour later, you've added margin: auto, tried text-align: center, thrown in position: relative with top: 50%, and the thing is still off by 12 pixels in Firefox. You rage-Google "CSS centering" for the fourth time this week.

That frustration is universal — and it's almost entirely avoidable with CSS Flexbox.

Flexbox (the Flexible Box Layout Module) is not just a CSS trick. It's a complete one-dimensional layout system built directly into the browser. It gives you precise, predictable control over how elements are sized, spaced, and aligned inside a container — without a single float, without a clearfix hack, and without losing your mind.

In this guide, we're going to break it down piece by piece. By the end, you'll have a cheat sheet for every core property and four real-world UI patterns you can copy straight into your projects today.

Let's get into it.

---

The Blueprint: Understanding the Container and Its Children

Before you write a single line of Flexbox CSS, you need to lock in this mental model. Everything in Flexbox revolves around a parent-child relationship.

• The Flex Container is the parent element you apply display: flex to.
• The Flex Items are the direct children inside that container.

That's it. The container controls the layout rules. The items respond to those rules. Get that backwards — applying container properties to the items — and nothing will work.

<!-- The Flex Container (the parent) -->
<div class="flex-container">

  <!-- These are the Flex Items (the direct children) -->
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>

</div>

.flex-container {
  display: flex; /* This is the magic switch */
}

The instant you add display: flex to the parent, all direct children line up in a row automatically. The browser's default flex behavior kicks in. From here, you're just customizing.

Note: Only direct children become flex items. A grandchild element is unaffected unless you also apply display: flex to its own parent.

---

The Dual-Axis System: Main Axis vs. Cross Axis

This is the concept that trips up almost every developer new to Flexbox. Understanding it will make everything else click instantly.

Flexbox operates on two axes at all times:

• Main Axis → the primary direction items flow along.
• Cross Axis → perpendicular to the main axis.

The direction of these axes is controlled by flex-direction. Here's the critical rule:

flex-direction value	Main Axis Direction	Cross Axis Direction
row (default)	Left → Right (horizontal)	Top → Bottom (vertical)
row-reverse	Right → Left (horizontal)	Top → Bottom (vertical)
column	Top → Bottom (vertical)	Left → Right (horizontal)
column-reverse	Bottom → Top (vertical)	Left → Right (horizontal)

Why does this matter so much? Because justify-content always controls the main axis and align-items always controls the cross axis. When you flip flex-direction to column, those two properties flip their physical directions with it.

flex-direction: row (default)
┌──────────────────────────────────────────────┐
│  MAIN AXIS ──────────────────────────────►   │
│  ┌────────┐  ┌────────┐  ┌────────┐          │
│  │ Item 1 │  │ Item 2 │  │ Item 3 │  C       │
│  └────────┘  └────────┘  └────────┘  R       │
│                                       O  ▼   │
└──────────────────────────────────────────────┘
                                        CROSS AXIS


flex-direction: column
┌──────────────────────────────────────────────┐
│  ┌──────────────────┐   C ──────────────────►│
│  │      Item 1      │   R                    │
│  └──────────────────┘   O   CROSS AXIS       │
│  ┌──────────────────┐   S                    │
│  │      Item 2      │   S                    │
│  └──────────────────┘                        │
│  MAIN AXIS ▼                                 │
└──────────────────────────────────────────────┘

Burn this into your memory: the axis direction follows flex-direction, and your alignment properties follow the axes.

---

The Parent Properties Cheat Sheet

These are all applied to the flex container (the parent). Bookmark this section — you'll refer to it constantly.

---

display: flex

Activates the flex formatting context. Nothing else on this list works without it.

.flex-container {
  display: flex;
}

---

flex-direction

Sets the main axis and determines which direction flex items flow.

.flex-container {
  flex-direction: row;         /* Default: items flow left to right */
  flex-direction: row-reverse; /* Items flow right to left */
  flex-direction: column;      /* Items stack top to bottom */
  flex-direction: column-reverse; /* Items stack bottom to top */
}

Note: Setting flex-direction: column is what makes Flexbox behave like a vertical layout system — this is the key to patterns like the Holy Grail sticky footer we'll build later.

---

justify-content

Controls item alignment along the main axis. Think of it as managing horizontal space distribution when flex-direction is row.

.flex-container {
  justify-content: flex-start;    /* Default: pack items to the start */
  justify-content: flex-end;      /* Pack items to the end */
  justify-content: center;        /* Center items */
  justify-content: space-between; /* Equal space BETWEEN items, no outer space */
  justify-content: space-around;  /* Equal space AROUND each item (half on edges) */
  justify-content: space-evenly;  /* Perfectly equal space between all gaps */
}

The one you'll reach for most often in real projects: space-between (for navbars and card rows) and center (for hero sections and modal dialogs).

---

align-items

Controls item alignment along the cross axis. When flex-direction is row, this controls the vertical alignment of your items.

.flex-container {
  align-items: stretch;    /* Default: items stretch to fill the container height */
  align-items: center;     /* Vertically center all items */
  align-items: flex-start; /* Align items to the top of the container */
  align-items: flex-end;   /* Align items to the bottom of the container */
}

Combine justify-content: center with align-items: center and you've got perfect centering in both directions — which brings us to Example 1.

---

flex-wrap

Controls whether items are forced onto a single line or allowed to wrap onto multiple lines.

.flex-container {
  flex-wrap: nowrap; /* Default: all items stay on one line, shrinking if needed */
  flex-wrap: wrap;   /* Items wrap to a new line when they run out of space */
}

Without flex-wrap: wrap, your flex items will squish into increasingly tiny columns before they ever break to a new line. For responsive card grids, wrap is non-negotiable.

---

gap

The modern, clean way to add spacing between flex items. No more margin-right on every item, then removing it on the last child with a :last-child hack.

.flex-container {
  gap: 1rem;           /* Equal gap in both row and column directions */
  gap: 1rem 2rem;      /* row-gap: 1rem | column-gap: 2rem */
  row-gap: 1rem;       /* Gap between rows only (when items wrap) */
  column-gap: 1.5rem;  /* Gap between columns only */
}

Note: gap is a container property — it creates space between items, never on the outside edges of the container. It's also now supported in all modern browsers with no caveats.

---

Real-World Examples: Building Actual UI Patterns

Enough theory. Let's build things.

---

Example 1: The Ultimate Centering Solution

This is the one every developer searches for. A fixed-size box, perfectly centered horizontally and vertically in its parent — no JavaScript, no hacks.

The approach: Set the container to display: flex, then use justify-content: center (centers on the main axis) and align-items: center (centers on the cross axis). Done.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Centering</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <main class="centering-container">
    <article class="centered-card">
      <h2>I am perfectly centered.</h2>
      <p>Flexbox did this in 3 lines of CSS.</p>
    </article>
  </main>

</body>
</html>

/* style.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

.centering-container {
  display: flex;
  justify-content: center; /* Centers horizontally on the main axis */
  align-items: center;     /* Centers vertically on the cross axis */
  min-height: 100vh;       /* Ensures the container fills the full viewport height */
  background-color: #f0f4f8;
}

.centered-card {
  background-color: #ffffff;
  padding: 2.5rem 3rem;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  max-width: 400px;
}

.centered-card h2 {
  font-size: 1.5rem;
  color: #1a202c;
  margin-bottom: 0.75rem;
}

.centered-card p {
  color: #718096;
}

That's the centering problem — solved forever. Save this pattern.

---

Example 2: The Responsive Navigation Bar

A logo on the left, navigation links on the right. This is one of the most common UI patterns in web development and a perfect use case for justify-content: space-between.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="site-header">
    <nav class="nav-container">

      <a href="/" class="nav-logo">
        WebsoftTuts
      </a>

      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
      </ul>

    </nav>
  </header>

  <main>
    <p style="padding: 2rem;">Page content goes here.</p>
  </main>

</body>
</html>

/* style.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

.site-header {
  background-color: #1a202c;
  padding: 0 2rem;
}

.nav-container {
  display: flex;
  justify-content: space-between; /* Logo left, links right — automatically */
  align-items: center;            /* Vertically centers both the logo and the links */
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
}

.nav-logo {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;            /* The <ul> itself becomes a flex container for the links */
  align-items: center;
  gap: 2rem;                /* Clean spacing between each link — no margins needed */
  list-style: none;
}

.nav-links a {
  color: #a0aec0;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: #ffffff;
}

Notice the gap: 2rem on .nav-links. No more margin-right: 2rem with a li:last-child { margin-right: 0 } hack. The gap property handles the spacing between items cleanly and stops at the edges automatically.

---

Example 3: The Holy Grail Sticky Footer

"Why isn't my footer at the bottom?" might be the second most Googled CSS question after centering. When your page content is short, the footer floats up and leaves a blank gap at the bottom of the viewport. Flexbox fixes this elegantly.

The approach: Make the <body> itself a flex container with flex-direction: column. Give the <main> element flex-grow: 1 — this tells it to consume all available remaining vertical space, pushing the footer down naturally.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Sticky Footer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="site-header">
    <p>Site Header / Navbar</p>
  </header>

  <main class="site-main">
    <h1>Short Page Content</h1>
    <p>Even though there's barely any content here, the footer stays at the bottom.</p>
  </main>

  <footer class="site-footer">
    <p>&copy; 2025 Websofttuts. All rights reserved.</p>
  </footer>

</body>
</html>

/* style.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;

  /* The key: make the body a full-height column flex container */
  display: flex;
  flex-direction: column; /* Stack header, main, and footer vertically */
  min-height: 100vh;      /* At minimum, fill the entire viewport height */
}

.site-header {
  background-color: #2d3748;
  color: #ffffff;
  padding: 1rem 2rem;
}

.site-main {
  flex-grow: 1; /* This is the magic: greedily consume all leftover vertical space */
  padding: 2.5rem 2rem;
  background-color: #f7fafc;
}

.site-footer {
  background-color: #1a202c;
  color: #a0aec0;
  text-align: center;
  padding: 1.5rem 2rem;
  font-size: 0.875rem;
}

The key property here is flex-grow: 1 on .site-main. It tells the main content area: "take up all the space left over after the header and footer claim theirs." The footer gets pushed down naturally — on a short page or a long one.

Note: flex-grow is a child (item) property, not a container property. This is one of the few examples in this guide where we apply a property to a flex item to influence the overall layout.

---

Example 4: The 3×3 Responsive Card Grid

Blog cards, product listings, feature sections — they all need a grid of cards that flows responsively without CSS Grid (which is a separate guide for another day). flex-wrap combined with flex-basis gives us a clean, responsive card layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Card Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <main class="page-wrapper">

    <h1 class="grid-heading">Latest Tutorials</h1>

    <section class="card-grid">

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">Mastering CSS Grid</h2>
          <p class="card-excerpt">Take your layout skills beyond Flexbox with the two-dimensional power of CSS Grid.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">JavaScript Async/Await</h2>
          <p class="card-excerpt">Ditch the callback hell and write clean asynchronous code with modern JS syntax.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">Intro to React Hooks</h2>
          <p class="card-excerpt">Learn how useState and useEffect changed the way we write React components forever.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">Node.js REST APIs</h2>
          <p class="card-excerpt">Build your first production-ready REST API with Express.js, step by step.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">Git Branching Strategy</h2>
          <p class="card-excerpt">Stop committing directly to main. Here's the branch model your team actually needs.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

      <article class="card">
        <div class="card-image-placeholder"></div>
        <div class="card-body">
          <h2 class="card-title">CSS Custom Properties</h2>
          <p class="card-excerpt">Use CSS variables to build maintainable, themeable design systems from scratch.</p>
          <a href="#" class="card-link">Read More &rarr;</a>
        </div>
      </article>

    </section>

  </main>

</body>
</html>

/* style.css */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  background-color: #f7fafc;
  color: #2d3748;
}

.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.grid-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: #1a202c;
}

/* ─── The Card Grid Container ─────────────────── */
.card-grid {
  display: flex;
  flex-wrap: wrap;   /* Allow cards to wrap to new rows */
  gap: 1.5rem;       /* Clean gutters between all cards */
}

/* ─── Individual Card Items ────────────────────── */
.card {
  /*
    flex-basis: calc(33.333% - 1rem) tells each card to aim for ~one-third width.
    flex-grow: 1 lets it expand to fill available space.
    flex-shrink: 1 lets it compress slightly if needed.
    min-width: 280px ensures cards never get too narrow before wrapping.
  */
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 280px;

  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* Make each card a column flex container for the footer-pinned link */
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-image-placeholder {
  background-color: #e2e8f0;
  height: 180px;
  width: 100%;
}

.card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Pushes the .card-link to the bottom of every card */
  gap: 0.75rem;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a202c;
  line-height: 1.4;
}

.card-excerpt {
  font-size: 0.9rem;
  color: #718096;
  line-height: 1.6;
  flex-grow: 1; /* Lets the excerpt fill space, pinning the link to the bottom */
}

.card-link {
  display: inline-block;
  color: #3182ce;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto; /* Auto margin pushes the link to the very bottom of the card */
}

.card-link:hover {
  color: #2c5282;
  text-decoration: underline;
}

The responsiveness happens through three cooperating rules on .card:

• flex-wrap: wrap on the container lets cards break to new lines.
• flex: 1 1 calc(33.333% - 1rem) sets a starting size of roughly one-third width.
• min-width: 280px acts as the breakpoint trigger — when cards can't fit their min-width in one row, they wrap automatically.

No media queries required for the basic responsive behavior. Clean and lightweight.

---

Common Pitfalls and How to Fix Them

Even developers who know Flexbox well fall into these traps regularly.

---

Pitfall 1: Items Are Shrinking and You Don't Know Why

You set your item widths carefully, then the moment you add more items to the row, everything squishes. The culprit is flex-shrink, which defaults to 1 on all flex items. This means items are allowed to shrink below their defined size to fit the container.

The fix: Either set flex-shrink: 0 on items that must not shrink, or use flex-basis instead of width to give Flexbox the correct starting size hint.

.card {
  flex-basis: 300px; /* The ideal starting size */
  flex-shrink: 0;    /* This item will NOT shrink below 300px */
  flex-grow: 0;      /* This item will NOT grow beyond 300px */
}

/* Or the shorthand equivalent: */
.card {
  flex: 0 0 300px; /* flex-grow | flex-shrink | flex-basis */
}

Note: The flex shorthand is flex-grow flex-shrink flex-basis. A value of flex: 0 0 300px means "don't grow, don't shrink, start at 300px." This is perfect for fixed-size sidebar columns.

---

Pitfall 2: Mixing Up Parent and Child Properties

This is the #1 beginner mistake. Here's a hard rule:

Container (parent) properties:

Property	Applied to
display: flex	Parent
flex-direction	Parent
justify-content	Parent
align-items	Parent
flex-wrap	Parent
gap	Parent

Item (child) properties:

Property	Applied to
flex-grow	Child
flex-shrink	Child
flex-basis	Child
align-self	Child
order	Child

If justify-content isn't working, first check: are you applying it to the container and not one of the items?

---

Pitfall 3: Forgetting That align-items Axis Changes with flex-direction

When you switch to flex-direction: column, justify-content now controls vertical alignment and align-items now controls horizontal alignment. This is disorienting at first but logical once the dual-axis model clicks.

/* flex-direction: row (default) */
.container {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Centers items HORIZONTALLY */
  align-items: center;     /* Centers items VERTICALLY */
}

/* flex-direction: column */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers items VERTICALLY now */
  align-items: center;     /* Centers items HORIZONTALLY now */
}

When in doubt, sketch out which axis is the "main" one before you type.

---

Wrapping Up: You Now Have Flexbox Superpowers

Let's do a quick recap of what you've learned:

• Flexbox is a parent-child system. The container holds the layout power; items respond to it.
• The Main Axis and Cross Axis are governed by flex-direction. Get that right and everything else falls into place.
• justify-content controls the main axis; align-items controls the cross axis.
• gap is the clean, modern way to handle spacing — ditch the old margin hacks.
• flex-wrap: wrap combined with flex-basis and min-width gives you responsive layouts without a single media query.
• flex-grow: 1 on a child item is the secret to the sticky footer pattern.

The four real-world patterns in this guide — the centered box, the responsive navbar, the sticky footer, and the card grid — cover the layout scenarios you'll hit in roughly 80% of your projects. Keep these snippets bookmarked.

Flexbox has a few more advanced properties to explore (align-content, align-self, order) — but armed with what you've learned here, you already have the foundation to figure those out fast.

---

Which layout problem has given you the biggest headache before you found Flexbox? Or is there a Flexbox pattern you're still struggling to crack? Drop it in the comments below — I read every single one and will help you debug it.

---

For more front-end fundamentals, CSS architecture guides, JavaScript deep dives, and full-stack project tutorials, bookmark Websofttuts — your go-to resource for practical, project-based web development learning. Next up: CSS Grid — the two-dimensional layout system that pairs perfectly with everything you've learned here.

CSS, HTML