CSS align-items Property

What You’ll Learn

The align-items property controls how flex items or grid items are aligned along the cross axis inside their container. It is one of the most useful Flexbox tools for vertically centering content or lining up items of different heights.

Definition and Usage

The align-items CSS property sets the default alignment for flex items or grid items on the cross axis. In a row-direction flex container, the cross axis is vertical, so align-items often controls how items sit top-to-bottom inside the row.

It affects every item in the container unless an item overrides it with align-self. This makes it perfect for centering icons beside text, equal-height cards in a row, or baseline-aligned labels.

📝 Syntax

Apply align-items to a flex or grid container:

.container {
  align-items: value;
}

Basic Flexbox Example

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

Syntax Rules

• Set align-items on the flex or grid container, not on individual items.
• The default value is stretch, which fills the cross-axis size of the flex line.
• Use align-self on a single item when you need an exception.
• In a column-direction flex container, the cross axis is horizontal.

Default Value

The initial value of align-items is stretch in flexbox. Flex items stretch to fill the container’s cross-axis size unless they have an explicit height or width on that axis.

💎 Property Values

These keyword values control how items align inside a single flex line or grid area.

align-items vs align-content

Examples Gallery

Try align-items with centered items, stretch, flex-end, and baseline text alignment.

<style>
  .container {
    display: flex;
    height: 200px;
    border: 2px solid #ccc;
    align-items: center;
  }
  .item {
    width: 100px;
    height: 50px;
    background: lightblue;
    margin: 10px;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.toolbar {
  display: flex;
  height: 120px;
  align-items: stretch;
}
.toolbar button {
  flex: 1;
}

.card-row {
  display: flex;
  min-height: 160px;
  align-items: flex-end;
  gap: 1rem;
}

<style>
  .label-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .label-row .large { font-size: 2rem; }
  .label-row .small { font-size: 1rem; }
</style>

<div class="label-row">
  <span class="large">Ag</span>
  <span class="small">Ag</span>
</div>

💡 Best Practices