Flexbox Alignment — justify-content, align-items, and align-self

Flexbox alignment controls how items are positioned on both axes. The most confusing part: which axis is “main” vs “cross” depends on flex-direction.

Use the Flexbox Generator to visualize alignment properties interactively.

Main axis vs cross axis

/* flex-direction: row (default) */
/* Main axis: horizontal (left → right) */
/* Cross axis: vertical (top → bottom) */

/* flex-direction: column */
/* Main axis: vertical (top → bottom) */
/* Cross axis: horizontal (left → right) */

justify-content (main axis)

.container { display: flex; }

/* Space items along the main axis: */
.container { justify-content: flex-start; }   /* default — items pack to start */
.container { justify-content: flex-end; }     /* items pack to end */
.container { justify-content: center; }       /* items centered */
.container { justify-content: space-between; }/* equal gaps between items, no edges */
.container { justify-content: space-around; } /* equal gaps around each item */
.container { justify-content: space-evenly; } /* equal gaps between + edges */

Visual representation of space-between vs space-around vs space-evenly:

space-between: [item]    [item]    [item]
space-around:   [item]  [item]  [item]  
space-evenly:  [item]  [item]  [item]

align-items (cross axis)

/* Align items on the cross axis: */
.container { align-items: stretch; }     /* default — stretch to container height */
.container { align-items: flex-start; }  /* items at top (row) or left (column) */
.container { align-items: flex-end; }    /* items at bottom or right */
.container { align-items: center; }      /* items centered on cross axis */
.container { align-items: baseline; }    /* items aligned to text baseline */

The classic centering pattern

/* Perfect centering: */
.container {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;       /* vertical */
}

/* Works for any parent size without knowing child dimensions */

/* Centering in full screen: */
.fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

align-self (override per item)

.container {
  display: flex;
  align-items: center;  /* default for all items */
}

/* Override for specific item: */
.item-top    { align-self: flex-start; }
.item-bottom { align-self: flex-end; }
.item-stretch { align-self: stretch; }

/* Common use: stretch one item to full height */
.sidebar { align-self: stretch; }  /* fills height even if others don't */

justify-self (Flexbox vs Grid)

/* NOTE: justify-self does NOT work in Flexbox! */
/* Use margin: auto instead: */

.container { display: flex; }
.push-right { margin-left: auto; }  /* Pushes this item to the right */

/* Example: nav with logo left, nav right: */
.nav {
  display: flex;
  align-items: center;
}

.nav-logo { /* stays left */ }
.nav-links { margin-left: auto; }  /* pushed to right */

align-content (multi-line)

Works when flex-wrap: wrap causes multiple lines:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;   /* lines packed to start */
  align-content: center;        /* lines centered */
  align-content: space-between; /* lines with equal space between */
  align-content: space-evenly;
  align-content: stretch;       /* default — lines expand to fill height */
}

/* Note: align-content only has effect when there are multiple flex lines */

gap (gutters)

.container {
  display: flex;
  gap: 16px;           /* gap between all items */
  gap: 16px 24px;      /* row-gap column-gap */
  row-gap: 16px;
  column-gap: 24px;
}

/* Old approach (still works): */
.item + .item { margin-left: 16px; }

Flex shorthand

/* flex: flex-grow flex-shrink flex-basis */

.item { flex: 1; }        /* grow=1, shrink=1, basis=0% */
.item { flex: auto; }     /* grow=1, shrink=1, basis=auto */
.item { flex: none; }     /* grow=0, shrink=0, basis=auto (no flex) */
.item { flex: 0 0 200px; }/* fixed 200px, no grow or shrink */
.item { flex: 2; }        /* takes 2× space of flex: 1 items */

Common alignment patterns

/* Sticky footer: */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main { flex: 1; }  /* grows to fill space, pushes footer down */

/* Card grid with equal height cards: */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px;  /* grow, shrink, min-width */
  display: flex;
  flex-direction: column;
}
.card-body { flex: 1; }  /* content fills available space */

/* Centered loading spinner: */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Related tools

• Flexbox Generator — generate and preview flexbox layouts
• Flexbox Layout Patterns — real-world flexbox layouts
• CSS Grid vs Flexbox — when to use which