References

Beginner-friendly references for web development, with live, editable examples.

The CSS align-items property

Property CSS All modern browsers Updated
Quick answer

The CSS align-items property aligns items along the cross axis of a flex or grid container — vertically, by default. The default is stretch; use center to line items up down the middle. It is the property you pair with justify-content to center something both ways.

Overview

If justify-content handles the main axis, align-items handles the other one — the cross axis. In a normal row that means vertical alignment, which is exactly the control people spent years wishing CSS had.

By default it is set to stretch, which is why flex children grow to the full height of their tallest sibling unless you stop them. Switch it to center and every item lines up down the middle regardless of its size; flex-start and flex-end pin them to the top or bottom; baseline lines them up by the baseline of their text, which is handy when items have different font sizes.

One thing worth knowing: align-items sets the default for every item in the container, but an individual item can opt out with align-self. So you can center the whole row and still drop one item to the bottom without touching the others.

Syntax

selector {
  display: flex;
  align-items: value;
}

/* vertical centering */
.bar {
  display: flex;
  align-items: center;
}

Values

The align-items property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
stretch Items grow to fill the cross axis (e.g. equal-height columns). The default.
center Centers items along the cross axis — vertical centering in a row.
flex-start Aligns items to the start of the cross axis (the top, in a row).
flex-end Aligns items to the end of the cross axis (the bottom, in a row).
baseline Aligns items by the baseline of their text, regardless of box height.

Example

Live example 
<style>
  .row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 120px;
    background: #eef2ff;
    border-radius: 10px;
    padding: 0 14px;
    font: 600 14px system-ui, sans-serif;
  }
  .row div { background: #1c7ce9; color: #fff; border-radius: 8px; padding: 10px 14px; }
  .tall { padding-block: 24px; }
</style>
<div class="row">
  <div>Short</div>
  <div class="tall">Tall</div>
  <div>Short</div>
</div>

Best practices

  • Use align-items: center with justify-content: center for the cleanest way to center an element in both directions.
  • Leave it on stretch when you want equal-height cards in a row — the items match the tallest one for free.
  • Override a single item with align-self instead of restructuring the markup when one child needs to sit differently.
  • Reach for baseline when aligning text of different sizes (a heading next to a label) so their letters sit on the same line.

Frequently asked questions

How do I vertically center with align-items?
On a flex container, set align-items: center. The items line up down the middle of the cross axis. Add justify-content: center to center horizontally too.
What is the difference between align-items and justify-content?
align-items aligns on the cross axis (vertical in a row); justify-content aligns on the main axis (horizontal in a row).
What is the difference between align-items and align-self?
align-items sets the cross-axis alignment for all items in the container. align-self overrides it for one specific item.
Why are my flex items all the same height?
Because the default align-items value is stretch. Set it to flex-start, center or flex-end if you do not want them stretched to match.
accent-color align-self