CSS Flexbox Complete Guide: From Basics to Advanced Patterns

CSS Flexbox is the go-to layout system for modern web development. Whether you are building a navigation bar, centering content, or creating complex responsive layouts, Flexbox makes it simple and intuitive. This complete CSS Flexbox guide covers everything from the basics to advanced patterns with practical code examples you can use in your projects today.

1. What Is Flexbox and When to Use It

Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for distributing space and aligning items within a container. Unlike CSS Grid (which handles two dimensions), Flexbox works along a single axis at a time — either horizontal (row) or vertical (column).

/* Use Flexbox when you need: */

/* 1. One-dimensional alignment (row OR column) */
.toolbar { display: flex; gap: 8px; }

/* 2. Content-driven sizing */
.tabs { display: flex; }
.tab { flex: 1; }  /* equal-width tabs */

/* 3. Dynamic ordering */
.card { display: flex; flex-direction: column; }
.card-footer { order: 3; margin-top: auto; }

/* Use CSS Grid instead when you need: */
/* - Two-dimensional control (rows AND columns) */
/* - Layout-driven sizing (template areas) */
/* - Complex page-level layouts */

2. Flex Container: The Parent Element

Everything starts with the flex container. Setting display: flex on an element turns its direct children into flex items and activates the flexbox layout model.

/* Block-level flex container */
.container {
  display: flex;
}

/* Inline-level flex container */
.inline-container {
  display: inline-flex;
}

/* flex-direction: controls the main axis direction */
.row      { flex-direction: row; }          /* left to right (default) */
.row-rev  { flex-direction: row-reverse; }  /* right to left */
.col      { flex-direction: column; }       /* top to bottom */
.col-rev  { flex-direction: column-reverse; } /* bottom to top */

/* flex-flow: shorthand for direction + wrap */
.container {
  flex-flow: row wrap;
  /* same as: flex-direction: row; flex-wrap: wrap; */
}

3. Main Axis vs Cross Axis

Understanding the two axes is the key to mastering Flexbox. The main axis runs in the direction of flex-direction, and the cross axis runs perpendicular to it.

/*
 * flex-direction: row (default)
 * ┌──────────────────────────────────────────┐
 * │ ← ← ← ← ← ← MAIN AXIS → → → → → → →  │
 * │                                          │
 * │  ↑   ┌────┐  ┌────┐  ┌────┐             │
 * │  │   │ 1  │  │ 2  │  │ 3  │   CROSS     │
 * │  │   └────┘  └────┘  └────┘   AXIS      │
 * │  ↓                                       │
 * └──────────────────────────────────────────┘
 *
 * flex-direction: column
 * ┌──────────────────┐
 * │ ←CROSS AXIS→     │
 * │                  │
 * │  ↑  ┌────────┐   │
 * │  │  │   1    │   │
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │  MAIN
 * │  │  │   2    │   │  AXIS
 * │  │  └────────┘   │
 * │  │  ┌────────┐   │
 * │  ↓  │   3    │   │
 * │     └────────┘   │
 * └──────────────────┘
 *
 * KEY INSIGHT:
 * - justify-content = main axis
 * - align-items     = cross axis
 * - When flex-direction changes, the axes swap!
 */

4. Justify Content: Aligning Along the Main Axis

justify-content controls how flex items are distributed along the main axis. This is the property you use for horizontal alignment (in the default row direction).

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* [1][2][3]                    */

  /* Center items */
  justify-content: center;
  /*         [1][2][3]            */

  /* Pack items to the end */
  justify-content: flex-end;
  /*                    [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* [1]        [2]        [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /*   [1]     [2]     [3]      */

  /* Equal space everywhere */
  justify-content: space-evenly;
  /*    [1]    [2]    [3]       */
}

5. Align Items: Aligning Along the Cross Axis

align-items controls how flex items are positioned along the cross axis. This is the property you use for vertical alignment (in the default row direction).

.container {
  display: flex;
  height: 200px;

  align-items: stretch;     /* Items fill container height (default) */
  align-items: flex-start;  /* Items at the top */
  align-items: center;      /* Items vertically centered */
  align-items: flex-end;    /* Items at the bottom */
  align-items: baseline;    /* Items aligned by text baseline */
}

/* Override for a single item */
.special-item {
  align-self: center;  /* This item centered, others follow container */
}

/* align-content: controls spacing between LINES (only with wrap) */
.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* lines packed to top */
  align-content: center;        /* lines centered */
  align-content: space-between; /* equal space between lines */
}

6. Flex Item Properties: grow, shrink, basis

The three flex item properties control how items share available space. Understanding these is essential for responsive layouts.

/* flex-grow: how much an item GROWS when extra space exists */
.item { flex-grow: 0; }  /* default: don't grow */
.item { flex-grow: 1; }  /* grow to fill available space */
.item { flex-grow: 2; }  /* grow twice as much as flex-grow: 1 items */

/* flex-shrink: how much an item SHRINKS when space is tight */
.item { flex-shrink: 1; }  /* default: shrink proportionally */
.item { flex-shrink: 0; }  /* never shrink (fixed size) */

/* flex-basis: the STARTING SIZE before grow/shrink */
.item { flex-basis: auto; }   /* use content width (default) */
.item { flex-basis: 0; }      /* start from zero, grow equally */
.item { flex-basis: 200px; }  /* start from 200px */
.item { flex-basis: 25%; }    /* start from 25% of container */

/* flex shorthand (recommended) */
.item { flex: 1; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
/* Items grow equally from zero — equal widths */

.item { flex: auto; }
/* = flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* Items grow from content size — proportional widths */

.item { flex: none; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: auto */
/* Items are inflexible — use content width only */

.item { flex: 0 0 200px; }
/* = flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
/* Fixed 200px item that never grows or shrinks */

7. Flex Wrap and Multi-Line Layouts

By default, flex items are squeezed onto a single line. flex-wrap allows items to wrap to the next line when they run out of space.

.container {
  display: flex;

  flex-wrap: nowrap;        /* default — single line, may overflow */
  flex-wrap: wrap;          /* wrap to next line when needed */
  flex-wrap: wrap-reverse;  /* wrap in reverse order */
}

/* Practical example: responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min-width 300px */
  max-width: 400px;  /* cap maximum width */
}
/* Result:
 * Wide screen:  [card] [card] [card] [card]
 * Medium:       [card] [card] [card]
 *               [card]
 * Narrow:       [card]
 *               [card]
 *               [card]
 *               [card]
 */

8. The gap Property

The gap property adds space between flex items without adding margins to the outer edges. It is the modern, clean way to handle spacing.

.container {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;              /* equal gap in both directions */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */
  row-gap: 20px;          /* vertical spacing only */
  column-gap: 12px;       /* horizontal spacing only */
}

/* Why gap is better than margins: */

/* Old approach (margins) - awkward edge spacing */
.item { margin: 8px; }
/* Creates 8px margin on ALL sides, including outer edges */
/* Need negative margins on container to compensate */

/* Modern approach (gap) - clean spacing */
.container { display: flex; gap: 16px; }
/* Space ONLY between items, not on outer edges */

9. Common Flexbox Layout Patterns

Here are the most frequently used Flexbox patterns you will encounter in real-world projects. Each one is production-ready and responsive.

Perfect Centering

/* Center anything horizontally and vertically */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* or any fixed height */
}

/* Alternative: margin auto trick */
.parent { display: flex; height: 100vh; }
.child  { margin: auto; }  /* centers in both axes */

Navigation Bar

/* Logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

/* Logo left, links center, actions right */
.navbar-3-section {
  display: flex;
  align-items: center;
}
.navbar-3-section .logo    { flex: 1; }
.navbar-3-section .links   { flex: 0; display: flex; gap: 24px; }
.navbar-3-section .actions { flex: 1; display: flex; justify-content: flex-end; }

Sticky Footer

/* Footer stays at bottom even with short content */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header { flex-shrink: 0; }   /* fixed height */
main   { flex: 1; }          /* fills all remaining space */
footer { flex-shrink: 0; }   /* fixed height, stays at bottom */

Sidebar Layout

/* Fixed sidebar + fluid main content */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 280px;  /* fixed 280px, never grow or shrink */
}

.main-content {
  flex: 1;          /* takes remaining space */
  min-width: 0;     /* prevents overflow */
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Equal-Height Cards

/* Cards in a row, all same height, button at bottom */
.card-row {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;  /* fills remaining space, pushing footer down */
}

.card-footer {
  margin-top: auto;  /* always at the bottom */
}

10. Flexbox vs CSS Grid: When to Use Each

Flexbox and CSS Grid are complementary tools. Choosing the right one depends on whether your layout is one-dimensional or two-dimensional.

/* Use BOTH together for best results: */

/* Grid for page layout */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

/* Flexbox for components inside grid areas */
.header {
  grid-area: header;
  display: flex;              /* Flexbox inside Grid */
  justify-content: space-between;
  align-items: center;
}

Frequently Asked Questions

How do I center a div with Flexbox?

Set the parent to display: flex, then use justify-content: center for horizontal centering and align-items: center for vertical centering. For both axes at once: display: flex; justify-content: center; align-items: center; height: 100vh. This is the simplest and most reliable centering method in CSS.

What is the difference between flex: 1 and flex: auto?

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Items grow equally from a zero base. flex: auto is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: auto. Items grow from their content size. Use flex: 1 for equal-width columns, flex: auto when items should grow proportionally to their content.

Why is my flex item overflowing its container?

Flex items have min-width: auto by default, which prevents them from shrinking below their content size. To fix overflow, add min-width: 0 to the flex item. For text overflow, also add overflow: hidden and text-overflow: ellipsis. For flex-direction: column, use min-height: 0 instead.

Can I use Flexbox for a full page layout?

Yes. Set the body to display: flex; flex-direction: column; min-height: 100vh. The header and footer get flex-shrink: 0, and the main content gets flex: 1 to fill remaining space. This creates a sticky footer layout. For more complex page layouts with sidebars, CSS Grid is often a better choice.

Is Flexbox supported in all browsers?

Yes, Flexbox has over 99% browser support globally, including all modern browsers. The gap property for Flexbox specifically requires Chrome 84+, Firefox 63+, Safari 14.1+, and Edge 84+. For older browser support, use margins instead of gap.

Flexbox is an essential skill for every front-end developer. Practice these patterns and they will become second nature. For experimenting with layouts visually, try our tools below.