CSS Flexbox — Complete Guide with Interactive Examples

In this tutorial, you'll learn about CSS Flexbox. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Flexbox is a one-dimensional CSS layout model that distributes space and aligns items along a row or column. It solves problems that were notoriously difficult with older CSS — vertical centering, equal-height columns, and flexible navigation bars — with just a few lines of code.

What You'll Learn

By the end of this tutorial, you'll create a flex container with display: flex, control direction with flex-direction, align items with justify-content (main axis) and align-items (cross axis), allow wrapping with flex-wrap, use the flex shorthand (grow, shrink, basis), create common patterns: nav bars, centered content, card grids.

Where This Fits

flowchart LR
    A["CSS Variables"] --> B["**Flexbox**"]
    B --> C["CSS Grid"]
    C --> D["Responsive Design"]
    D --> E["Components & Effects"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Flex Container vs Flex Items

Flexbox has two parts:

• Flex container — the parent element with display: flex
• Flex items — the direct children of the container

<div class="container">   <!-- flex container -->
  <div class="item">1</div>  <!-- flex item -->
  <div class="item">2</div>  <!-- flex item -->
  <div class="item">3</div>  <!-- flex item -->
</div>

.container { display: flex; }

That's it. Just display: flex makes the children line up horizontally instead of stacking vertically. By default, they sit in a row, stretch to the same height, and don't wrap.

The Two Axes

Flexbox works on two perpendicular axes:

• Main axis — follows flex-direction (horizontal for row, vertical for column)
• Cross axis — perpendicular to the main axis

        ← main axis (row) →
      ┌─────┬─────┬─────┐
↑     │  1  │  2  │  3  │
cross │     │     │     │
axis  └─────┴─────┴─────┘
↓

Container Properties

flex-direction — Row or Column

.row { flex-direction: row; }              /* Left to right (default) */
.row-reverse { flex-direction: row-reverse; } /* Right to left */
.column { flex-direction: column; }         /* Top to bottom */
.column-reverse { flex-direction: column-reverse; } /* Bottom to top */

justify-content — Main Axis Alignment

Controls how items are spaced along the main axis:

.container {
  display: flex;
  justify-content: center;  /* or flex-start, flex-end, space-between, etc. */
}

align-items — Cross Axis Alignment

Controls how items align along the cross axis:

.container {
  display: flex;
  align-items: center;  /* or stretch, flex-start, flex-end */
}

The holy grail: display: flex; justify-content: center; align-items: center; perfectly centers content both horizontally and vertically.

flex-wrap — Multi-Line Layouts

By default, flex items try to fit on one line. flex-wrap: wrap lets them flow onto multiple lines:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

gap — Spacing Between Items

The gap property adds space between flex items (works in Grid too):

.container {
  display: flex;
  gap: 16px;  /* Space between items (not on edges) */
}

Item Properties

flex — The Magic Shorthand

flex is shorthand for three properties:

.item { flex: 1; }  /* Short for: flex-grow: 1; flex-shrink: 1; flex-basis: 0; */

Common Flex Values

.item { flex: 1; }          /* Grow equally, share available space */
.item { flex: 0 0 auto; }   /* Default — sized by content, no grow/shrink */
.item { flex: 0 0 200px; }  /* Fixed 200px, no grow, no shrink */
.item { flex: 1 1 300px; }  /* Grow, shrink, start at 300px */

Flex: 1 explained: When you give all items flex: 1, they divide the available space equally. If one item has flex: 2, it gets twice the space of the others.

align-self — Per-Item Override

Override align-items for a single item:

.container { align-items: flex-start; }   /* All items top-aligned */
.special { align-self: center; }           /* This one centered vertically */

Practical Patterns

1. Navigation Bar

.nav {
  display: flex;
  justify-content: space-between;  /* Logo left, links right */
  align-items: center;
  padding: 1rem 2rem;
}

2. Card Grid

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px;  /* Grow, shrink, min 300px */
}

3. Vertical Centering (The Holy Grail)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

4. Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }  /* Grows to fill space, pushing footer down */

Common Flexbox Mistakes

1. Applying Flex Properties to the Container Instead of Items

/* ❌ Wrong: flex-grow belongs on items, not container */
.container { display: flex; flex-grow: 1; }

/* ✅ Correct: flex-grow on the item */
.container { display: flex; }
.item { flex: 1; }

2. Forgetting flex-wrap on Responsive Grids

/* ❌ Wrong: items overflow and cause horizontal scrollbar */
.grid { display: flex; gap: 16px; }
.item { flex: 1 1 250px; }

/* ✅ Correct: items wrap to next line */
.grid { display: flex; flex-wrap: wrap; gap: 16px; }

3. Using justify-content for Vertical Alignment

/* ❌ Wrong: justify-content controls main axis (horizontal in row) */
.container { display: flex; justify-content: center; }  /* Horizontal only */

/* ✅ Correct: align-items controls cross axis (vertical in row) */
.container { display: flex; align-items: center; }

4. Not Using gap and Adding Manual Margins

/* ❌ Wrong: manual margins on items */
.item { margin-right: 16px; }
.item:last-child { margin-right: 0; }

/* ✅ Correct: gap on container */
.container { display: flex; gap: 16px; }

5. Applying Flex to Everything Instead of Using Grid

Flexbox is for one-dimensional layouts (rows OR columns). For two-dimensional layouts (rows AND columns simultaneously), use CSS Grid. If you need items to align in both directions, Grid is usually better.

Try It Yourself

Interactive Flexbox playground:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What does display: flex do? {{< details "Show answer" >}} It makes the element a flex container, turning its direct children into flex items that arrange themselves along a horizontal row by default. {{< /details >}}

Q2: What's the difference between justify-content and align-items? {{< details "Show answer" >}} justify-content aligns along the main axis (horizontal for row). align-items aligns along the cross axis (vertical for row). {{< /details >}}

Q3: What does flex: 1 mean? {{< details "Show answer" >}} It's shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0; — the item can grow and shrink equally relative to siblings. {{< /details >}}

Q4: When should you use flex-wrap? {{< details "Show answer" >}} When items would overflow the container. flex-wrap: wrap lets items flow onto multiple lines instead of squeezing into one line. {{< /details >}}

Q5: What's a quick way to perfectly center content in both directions? {{< details "Show answer" >}} display: flex; justify-content: center; align-items: center; on the parent. {{< /details >}}

Challenge

Build a responsive "Team Members" section with Flexbox:

• 3 member cards in a row on desktop
• 2 per row on tablet (flex-wrap: wrap)
• 1 per row on mobile
• Each card has an image, name, title, and bio
• Cards are equal height (automatic with flex)
• Uses gap for spacing, no manual margins

FAQ

FAQ

What's Next?

Now learn CSS Grid for two-dimensional layouts:

What's Next

Congratulations on completing this Css Flexbox tutorial! Here's where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!