CSS align-items property: Syntax, Usage, and Examples

The align-items property controls how flex or grid items line up on the cross axis inside a container. Use it to align items at the top, center, bottom, or stretch them to fill available space.

How to Use the align-items property

You use align-items on the container, not on the items. It works with display: flex and display: grid, but it behaves slightly differently in each layout mode.

Here’s the basic syntax:

.container {
display: flex;/* or grid */
align-items: center;
}

Common values include:

• stretch (default for flex and grid in many cases): items stretch to fill the cross axis, when their size allows it
• flex-start: items align to the start of the cross axis
• center: items align in the middle of the cross axis
• flex-end: items align to the end of the cross axis
• baseline: items align based on their text baseline (flex only)

How the “cross axis” works in flex

In a row layout, the main axis runs left to right, and the cross axis runs top to bottom. In a column layout, it flips.

.row {
display: flex;
flex-direction: row;
align-items: flex-end;/* vertical alignment in a row */
}

.column {
display: flex;
flex-direction: column;
align-items: center;/* horizontal alignment in a column */
}

If that ever feels backwards, a quick mental trick helps: justify-content follows the main axis, align-items follows the cross axis.

How it differs in grid

In grid, align-items aligns items inside their grid areas along the block (vertical) axis. You will often see it paired with justify-items for the inline (horizontal) axis.

.grid {
display: grid;
grid-template-columns:repeat(3,1fr);
align-items: start;
}

Grid also supports start and end as values, which map nicely to writing modes:

.grid {
display: grid;
align-items: end;
}

When to Use the align-items property

The align-items property is useful any time items look “misaligned” vertically or along the cross axis and you want to fix it at the container level.

1) Centering content in a row without extra padding hacks

Button icons and text often look off by a few pixels. align-items: center fixes that cleanly.

2) Making cards the same height in a horizontal layout

If you want a row of cards where items stretch to match height, align-items: stretch can help, as long as the items do not have a fixed height.

3) Aligning text and controls on a baseline

Forms can look messy when labels, inputs, and helper text sit at different visual heights. align-items: baseline creates a neater line for text-heavy layouts.

4) Keeping items pinned to the top or bottom of a container

Navbars, headers, and small toolbars often need flex-start or flex-end to keep items anchored.

Examples of the align-items property

1) Vertically centering an icon and label in a button row

This is one of those “why does this look weird” moments you hit on day one of CSS.

<divclass="actions">
<buttonclass="action">
<spanclass="icon"aria-hidden="true">★</span>
<span>Save</span>
</button>
<buttonclass="action">
<spanclass="icon"aria-hidden="true">↗</span>
<span>Share</span>
</button>
</div>

.actions {
display: flex;
gap:12px;
align-items: center;
}

.action {
display: inline-flex;
gap:8px;
align-items: center;
padding:10px12px;
border:1px solid#ccc;
background: white;
}

.icon {
font-size:18px;
line-height:1;
}

The outer container uses align-items: center so the buttons line up nicely, and each button uses it again to align its icon and text.

2) Aligning mixed-size cards to the bottom

If you have different card heights, bottom alignment can look intentional, like a neat shelf.

<divclass="card-row">
<articleclass="card">
<h3>Starter</h3>
<p>Good for small projects.</p>
</article>

<articleclass="card">
<h3>Team</h3>
<p>More features and longer text that makes the card taller.</p>
<p>Includes shared access.</p>
</article>

<articleclass="card">
<h3>Pro</h3>
<p>For larger workflows.</p>
</article>
</div>

.card-row {
display: flex;
gap:16px;
align-items: flex-end;
}

.card {
width:220px;
padding:14px;
border:1px solid#ddd;
background: white;
}

align-items: flex-end pushes the bottoms of the cards into a straight line.

3) Using baseline alignment for text-heavy rows

Baseline alignment shines when items have different font sizes. Think “price + tiny label + button.”

<divclass="price-row">
<spanclass="price">€29</span>
<spanclass="note">per month</span>
<buttonclass="buy">Buy</button>
</div>

.price-row {
display: flex;
gap:10px;
align-items: baseline;
}

.price {
font-size:32px;
font-weight:700;
}

.note {
font-size:14px;
color:#555;
}

.buy {
padding:8px10px;
border:1px solid#ccc;
background: white;
}

Everything sits on a shared text line instead of floating awkwardly.

4) Stretching items to fill the container height

Stretch is the default in many flex situations, but showing it explicitly can make your intent clear.

<divclass="sidebar-layout">
<asideclass="sidebar">Filters</aside>
<mainclass="content">Results</main>
</div>

.sidebar-layout {
display: flex;
align-items: stretch;
min-height:240px;
border:1px solid#ddd;
}

.sidebar {
width:160px;
padding:12px;
background:#f6f6f6;
}

.content {
flex:1;
padding:12px;
}

If you set a fixed height on the items, stretch cannot override that. Let them be auto-sized if you want the stretching effect.

Learn More About the align-items property

align-items vs align-self

align-items sets the default alignment for all items in the container. align-self overrides alignment for one item.

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

.special {
align-self: flex-start;
}

This is handy when one element needs to sit differently, like a “New” badge that hugs the top of a card while everything else stays centered.

align-items vs justify-content

People mix these up constantly, and honestly, CSS kind of invites the confusion.

• justify-content aligns items along the main axis
• align-items aligns items along the cross axis

In a row flex container, justify-content is horizontal and align-items is vertical. In a column container, it flips.

align-items in grid, and the related properties

In grid, you often think in pairs:

• align-items (block axis, vertical in most layouts)
• justify-items (inline axis, horizontal in most layouts)

If you want to align the entire grid content inside a larger container, that’s a different set:

• align-content
• justify-content

So if you try align-items and nothing moves, check what you are trying to align. You might be aiming for the grid as a whole, not each grid item.

Values: start/end vs flex-start/flex-end

For flex, you will commonly use flex-start and flex-end. For grid, start and end show up a lot. Many browsers support both sets in more places now, but mixing them can confuse readers.

A simple approach:

• Flex layouts: use flex-start, center, flex-end, baseline, stretch
• Grid layouts: use start, center, end, stretch

Debugging alignment problems faster

If align-items seems to do nothing, one of these is usually the reason:

• You set it on an item instead of the container.
• The container is not display: flex or display: grid.
• The item already has a fixed size on the cross axis, so stretching cannot happen.
• The container has no extra space on the cross axis, so there’s nothing to align within.

A quick trick is to temporarily add a height to the container, like min-height: 200px;, just to see alignment changes clearly. Remove it after you confirm the behavior.

Summary

The align-items property aligns flex or grid items along the cross axis. Use center for clean vertical centering, baseline for text alignment, and stretch when you want items to fill available space. When one element needs special treatment, reach for align-self instead of fighting the container rule.