CSS align-items, align-self, justify-items, and justify-self

align-items, align-self, justify-items, and justify-self are easy to confuse because their names look similar. The simplest way to choose is to ask two questions: are you setting the container or one item, and are you aligning on the cross axis or inline axis?

Quick table

Practical memory rule:

• align-* controls the cross-axis side.
• justify-* controls the inline/main-axis side depending on layout.
• *-items sets the default for children.
• *-self overrides one child.

align-items

Set it on a flex or grid container:

.container {
  display: flex;
  align-items: center;
}

Common uses:

• vertically center navbar items
• align cards in a row
• control grid item height behavior

Common values:

• start / flex-start
• center
• end / flex-end
• stretch
• baseline

align-self

Set it on one child to override the container:

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

Use it when one item needs different cross-axis alignment. Do not overuse it; many item-level overrides make layouts hard to predict.

justify-items

justify-items is most useful in Grid:

.grid {
  display: grid;
  justify-items: center;
}

It controls the default inline-axis alignment of grid items inside their grid areas.

Flexbox does not have a direct justify-self model for individual items on the main axis. Flexbox main-axis distribution is usually controlled by justify-content, spacing, item sizes, or auto margins.

justify-self

Use justify-self on a grid item:

.grid-item {
  justify-self: end;
}

Good use cases:

• one grid item aligned right
• a submit button in a grid form
• a dashboard card that should stretch while others stay centered

Example

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  justify-items: center;
}

.panel {
  width: 80%;
  min-height: 100px;
}

.urgent {
  align-self: stretch;
  justify-self: stretch;
}

Most panels follow the container defaults. The urgent panel fills its grid area by overriding both axes.

Common questions

Why does Flexbox not use justify-self for main-axis item alignment? Because Flexbox distributes items as a group along the main axis. Individual main-axis exceptions are usually done with auto margins or different layout structure.

Why does stretch happen by default in Grid? Grid items often stretch to fill their grid areas unless alignment rules say otherwise.

Are Flexbox and Grid values identical? The mental model is similar, but details differ. Grid commonly uses start and end; Flexbox examples often show flex-start and flex-end.

Related FreeMac guides

• For spacing systems, read Tailwind CSS Spacing: How the Scale Works.
• For rem-based layout sizing, read What is rem in CSS? Why 1rem Often Equals 16px.
• For stacking issues, read Why z-index Fails: Understanding CSS Stacking Context.