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

The align-items CSS 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.

align-items is a core property used in modern frontend layout systems. If you’ve built a UI and something feels slightly “off” vertically, this property is often the fix.

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 value 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 */
}

In flexbox terminology, the parent is a flexbox container and its children are flex items. align-items controls how those flex items sit relative to each other along the cross axis.

If you allow wrapping with flex-wrap, alignment still applies to each line independently. That becomes important in responsive layouts where items stack into multiple rows.

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;
}

When working with CSS grid, you might also control placement using grid-column and alignment shorthand using place-items. The place-items property combines align-items and justify-items into one declaration for convenience.

Spacing between tracks in grid layouts is typically handled with row-gap and column-gap, which control vertical and horizontal spacing separately without affecting alignment behavior.

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.

If horizontal spacing is needed at the same time, justify-content with values like space-around can distribute items evenly along the main axis while align-items handles vertical positioning.

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.

You may also control outer spacing using margin-top, margin-bottom, or margin-left to separate sections visually without interfering with cross-axis alignment.

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.

Baseline alignment is especially noticeable when elements use different font sizes, text-shadow effects, or reduced opacity values.

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.

In layered interfaces, alignment interacts with z-index for stacking order, but z-index controls layering depth while align-items controls cross-axis positioning.

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.

Visual styling properties such as background-size, border-image, box-shadow, and transition can enhance appearance but do not change how align-items distributes flex items along the cross axis.

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.

In list-based layouts converted from unordered lists, you might remove bullets with list-style and then use flex alignment to control vertical positioning.

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.