When should I use Flexbox vs CSS Grid?

Flexbox is best for one-dimensional layouts — a row of navigation links, a row of cards, a column of form inputs. CSS Grid is best for two-dimensional layouts — a full page layout with header, sidebar, content, and footer arranged in rows and columns. They're often used together.

Why do flex items shrink even when I don't want them to?

The default flex-shrink value is 1, which means all items can shrink. Set flex-shrink: 0 on items you don't want to shrink (logos, icons, fixed-size elements).

How do I make a flex item fill the remaining space?

Set flex-grow: 1 on that item. All other items will stay at their natural size; the grown item expands to fill whatever space is left.

Does gap replace margins between flex items?

In most cases, yes — gap is cleaner because it only adds space between items, not outside the first and last items. This removes the need to negate margins at the container edges.

What's the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal by default). align-items aligns items along the cross axis (vertical by default). Both work relative to the flex-direction.

CSS Flexbox Guide: Build Navigation Bars and Card Layouts

← Back to HTML & CSS Fundamentals course

Before Flexbox, building even simple layouts in CSS required float hacks, inline-block tricks, and manual calculations. Flexbox changed all of that. It's a one-dimensional layout system — designed for arranging items in a row or a column — and it handles alignment, spacing, and ordering with a handful of intuitive properties.

How Flexbox Works

Flexbox operates on two levels: the flex container (the parent element you apply display: flex to) and the flex items (the direct children of the container).

html

<nav class="navbar">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

css

.navbar {
  display: flex;
}

That single declaration turns .navbar into a flex container. Its direct children — the <a> elements — become flex items and automatically line up in a row.

Flex Container Properties

These properties are applied to the parent (the flex container).

`flex-direction`

Controls whether items flow in a row or column:

css

.container {
  flex-direction: row;            /* default — left to right */
  flex-direction: column;         /* top to bottom */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column-reverse; /* bottom to top */
}

`flex-wrap`

By default, flex items squeeze onto one line. flex-wrap lets them wrap to new lines:

css

.card-grid {
  display: flex;
  flex-wrap: wrap;  /* items wrap to next line when they overflow */
}

`justify-content`

Controls alignment along the main axis (horizontal in a row):

css

.container {
  justify-content: flex-start;    /* default — left-aligned */
  justify-content: flex-end;      /* right-aligned */
  justify-content: center;        /* centred */
  justify-content: space-between; /* equal space between items, none at edges */
  justify-content: space-around;  /* equal space around each item */
  justify-content: space-evenly;  /* equal space between items AND at edges */
}

space-between is the most common choice for navigation bars and toolbars.

`align-items`

Controls alignment along the cross axis (vertical in a row):

css

.container {
  align-items: stretch;    /* default — items stretch to fill container height */
  align-items: flex-start; /* aligned to top */
  align-items: flex-end;   /* aligned to bottom */
  align-items: center;     /* vertically centred */
  align-items: baseline;   /* aligned by text baseline */
}

align-items: center combined with justify-content: center is the classic "centre anything perfectly" pattern:

css

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

`gap`

Adds consistent space between flex items:

css

.nav {
  display: flex;
  gap: 1.5rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 1rem;  /* row-gap | column-gap */
}

Flex Item Properties

These properties are applied to individual children of a flex container.

`flex-grow`

How much an item should grow when there's extra space:

css

.main-content { flex-grow: 1; }  /* takes all available space */
.sidebar      { flex-grow: 0; }  /* stays at its natural size */

`flex-shrink`

How much an item should shrink when space is tight:

css

.logo { flex-shrink: 0; }  /* never shrink the logo */

`flex` Shorthand

css

.item {
  flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex: 0 0 250px;   /* no grow, no shrink, fixed at 250px */
  flex: 1 1 300px;   /* grow, shrink, start at 300px */
}

`align-self`

Overrides align-items for a specific item:

css

.featured-card {
  align-self: flex-end;
}

`order`

Changes the visual order without changing HTML:

css

.item-1 { order: 2; }  /* appears second */
.item-2 { order: 1; }  /* appears first */

Practical Example 1: Navigation Bar

html

<header class="site-header">
  <a class="logo" href="/">Topictrick</a>
  <nav class="nav-links">
    <a href="/tutorials">Tutorials</a>
    <a href="/courses">Courses</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1a1a2e;
}

.logo {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: #ccc;
  text-decoration: none;
}

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

Result: the logo sits on the left, navigation links on the right, both vertically centred.

Practical Example 2: Card Grid

css

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem;
}

.card {
  flex: 1 1 280px;  /* grow, shrink, minimum 280px wide */
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

Cards automatically wrap to new lines and fill available width. On a wide screen you might get 3 cards per row; on a tablet, 2; on mobile, 1.

Quick Reference

Property	Applied To	Effect
`display: flex`	Container	Activates flexbox
`flex-direction`	Container	Row or column layout
`flex-wrap`	Container	Allow/prevent wrapping
`justify-content`	Container	Main axis alignment
`align-items`	Container	Cross axis alignment
`gap`	Container	Space between items
`flex-grow`	Item	How much item expands
`flex-shrink`	Item	How much item contracts
`flex-basis`	Item	Starting size
`flex`	Item	Shorthand for grow/shrink/basis
`align-self`	Item	Override cross-axis alignment
`order`	Item	Visual order

Previous: Lesson 7 — CSS Box Model | Next: Lesson 9 — CSS Grid

Part of the HTML & CSS Fundamentals course.

How Flexbox Works

Flex Container Properties

flex-direction

flex-wrap

justify-content

align-items

gap