CSS align-items Property

Definition and Usage

The align-items property lines up every direct child inside its flex line or grid area. In a row flex, that is the vertical position: items move up, down, or stretch inside that one line.

One line is enough. align-self on a single child overrides the group. This property does not pack extra lines. Use align-content for that.

CSS Syntax

Property Values

How to Use align-items

Put it on the container. The children follow, unless one of them sets align-self.

1. Set display: flex or display: grid on the container.
2. Give the line a cross size you can see. For a row flex, that is usually height.
3. Set align-items on the container. It is not inherited.
4. Leave the item's cross size as auto if you want stretch. A fixed height on a row item blocks stretch.

Live Preview

Three items share one flex line. The middle word is larger so baseline is visible.

CSS Examples

Each snippet only adds what align-items needs: a flex row, a height, and the keyword. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
    height: 120px;
    align-items: center;
    border: 1px solid #ccc;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    height: 120px;
    align-items: flex-end;
    border: 1px solid #ccc;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    height: 120px;
    align-items: stretch;
    border: 1px solid #ccc;
  }
  div {
    border: 1px solid #999;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

Key Takeaways