Flex Alignment

Difficulty: Intermediate

Flexbox provides three main alignment properties: justify-content for aligning items along the main axis, align-items for aligning items along the cross axis, and align-content for distributing space between wrapped lines. Together with align-self (which overrides align-items for individual items), these four properties give you complete control over how flex items are positioned within their container.

justify-content controls the distribution of items along the main axis (horizontal by default). Its values include flex-start (pack items at the start), flex-end (pack items at the end), center (center all items), space-between (first item at start, last item at end, equal space between), space-around (equal space around each item, meaning edges have half the space of gaps between items), and space-evenly (equal space between items and at the edges). The space-between value is the most commonly used for navigation bars and card layouts.

align-items controls the alignment of items along the cross axis (vertical by default). Its values include stretch (the default, items expand to fill the container height), flex-start (items align to the top), flex-end (items align to the bottom), center (items are vertically centered), and baseline (items align by their text baselines). The stretch default is why flex items in a row naturally become the same height -- each item stretches to match the tallest one.

align-content only applies when there are multiple lines of flex items (i.e., when flex-wrap is set to wrap and items have wrapped to new lines). It controls how the lines themselves are distributed along the cross axis. Its values mirror justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly, and stretch. If there is only one line of items, align-content has no visible effect.

align-self is applied to individual flex items (not the container) and overrides the container's align-items value for that specific item. This is useful when most items should be centered but one item needs to be pinned to the top or bottom. The values are the same as align-items: auto (inherit from container), flex-start, flex-end, center, stretch, and baseline. There is no justify-self in Flexbox because the main axis distributes all items collectively via justify-content.

Code examples

justify-content Values

.flex-start { display: flex; justify-content: flex-start; }
/* |A  B  C              | */

.flex-end { display: flex; justify-content: flex-end; }
/* |              A  B  C| */

.center { display: flex; justify-content: center; }
/* |       A  B  C       | */

.space-between { display: flex; justify-content: space-between; }
/* |A        B        C| */

.space-around { display: flex; justify-content: space-around; }
/* |  A      B      C  | */

.space-evenly { display: flex; justify-content: space-evenly; }
/* |   A     B     C   | */

justify-content distributes items along the main axis. space-between puts equal space between items but none at the edges. space-around puts equal space around each item (edges get half-space). space-evenly distributes space equally everywhere.

align-items Values

.container {
  display: flex;
  height: 200px;
  border: 2px solid #e5e7eb;
}

.align-stretch { align-items: stretch; }
/* Items fill full height (default) */

.align-start { align-items: flex-start; }
/* Items align to the top */

.align-end { align-items: flex-end; }
/* Items align to the bottom */

.align-center { align-items: center; }
/* Items are vertically centered */

.align-baseline { align-items: baseline; }
/* Items align by their text baseline */

align-items controls cross-axis alignment. The default stretch makes all items the same height. Center is the most commonly used for vertically centering items. Baseline aligns items by their text content, which is useful when items have different font sizes.

Perfect Centering with Flexbox

/* The simplest way to center anything */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Centering a login card */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f3f4f6;
}

.login-card {
  width: 400px;
  padding: 32px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Combining justify-content: center and align-items: center on a flex container with a defined height perfectly centers its content both horizontally and vertically. This two-line centering technique is one of the most important CSS patterns to know.

align-self for Individual Items

.container {
  display: flex;
  align-items: center;
  height: 200px;
  gap: 16px;
  padding: 16px;
  border: 2px solid #e5e7eb;
}

.item {
  padding: 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

/* Override alignment for specific items */
.item-top {
  align-self: flex-start;
}

.item-bottom {
  align-self: flex-end;
}

.item-stretch {
  align-self: stretch;
}

align-self overrides the container's align-items for a specific item. Here, while the container centers all items by default, individual items can pin themselves to the top, bottom, or stretch to full height.

Key points

• The Flexbox centering trick (justify-content: center + align-items: center) requires the container to have a defined height. Without it, the container collapses to the height of its content and centering has no visible effect.
• align-content only works when flex-wrap is set to wrap and there are multiple lines of items. On a single-line flex container, it has no effect.
• There is no justify-self property in Flexbox. To push a single item to the opposite end, use margin-left: auto (for row) or margin-top: auto (for column) on that item.

Concepts covered

justify-content, align-items, align-content, align-self