CSS Flexbox - Complete Guide with Examples

Q: What is the difference between justify-content and align-items in flexbox?

justify-content controls alignment along the main axis (horizontal by default), while align-items controls alignment along the cross axis (vertical by default). If you set flex-direction: column, they swap — justify-content becomes vertical and align-items becomes horizontal.

Q: How do I center a div with flexbox?

Set the parent to display: flex; justify-content: center; align-items: center; and give it a height. That centers the child both horizontally and vertically. This works for any number of children.

Q: When should I use flexbox vs CSS grid?

Use flexbox for one-dimensional layouts — a row of buttons, a navigation bar, centering content. Use CSS grid for two-dimensional layouts — page layouts with rows AND columns, card grids with precise placement. They work well together: grid for the page structure, flexbox for components inside grid cells.

How Flexbox Works

Flexbox is a layout model designed for distributing space along a single axis. Set display: flex on a container and its direct children become flex items. The container controls the direction, alignment, and spacing. Each item can grow, shrink, or stay fixed.

The key mental model: flex has a main axis (the direction items flow) and a cross axis (perpendicular to it). By default the main axis is horizontal (left to right), but flex-direction: column flips it to vertical.

Basic Flex Container

.container {
  display: flex;
  gap: 12px;           /* spacing between items */
}
      

1

2

3

That is all you need. Items sit in a row with equal spacing. No floats, no clearfixes.

justify-content — Main Axis Alignment

Controls how items distribute along the main axis.

.container {
  display: flex;
  justify-content: space-between; /* also: flex-start, flex-end, center, space-around, space-evenly */
}
      

flex-start (default)

A

B

C

center

A

B

C

space-between

A

B

C

align-items — Cross Axis Alignment

.container {
  display: flex;
  align-items: center; /* also: flex-start, flex-end, stretch (default), baseline */
  height: 120px;
}
      

Short

Tall

Mid

All items vertically centered regardless of their individual heights.

Center Anything

The most common flexbox use case. Three lines to perfectly center content:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;       /* needs a defined height */
}
      

Centered

flex-wrap — Multi-line Flex

By default, flex items squeeze onto one line. Add flex-wrap: wrap to let them break into multiple rows.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.item {
  flex: 1 1 150px;    /* grow, shrink, basis */
}
      

Item 1

Item 2

Item 3

Item 4

flex-grow, flex-shrink, flex-basis

These three properties control how items resize. The shorthand flex: grow shrink basis is almost always what you want.

flex: 1 — item grows to fill available space
flex: 0 0 200px — fixed at 200px, no growing or shrinking
flex: 2 — takes twice as much space as flex: 1 siblings

.sidebar { flex: 0 0 250px; }  /* fixed width sidebar */
.main    { flex: 1; }          /* takes remaining space */
      

Sidebar

Main Content

Common Patterns

Navbar with logo left, links right

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
      

Logo

About

Contact

Equal-height cards

.cards { display: flex; gap: 16px; }
.card  { flex: 1; }              /* all cards same width */
      

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal by default). align-items aligns along the cross axis (vertical by default). If you switch to flex-direction: column, they swap roles.

How do I center a div with flexbox?

On the parent: display: flex; justify-content: center; align-items: center;. The parent needs a defined height (or the page body does). That is it — works for any content.

When should I use flexbox vs CSS grid?

Flexbox is for one-dimensional layout (a row or a column). Grid is for two-dimensional layout (rows AND columns). Use flexbox for navbars, button groups, centering. Use grid for page layouts and card grids. They combine well together.

Related Tools

Flexbox Generator Grid Generator CSS Grid Reference CSS Position Guide