CSS align-items Property

CSS align-items Property

The align-items property in CSS controls how flexbox or grid container items align along the cross-axis (vertical axis in flexbox).

1. Syntax

selector {
  align-items: value;
}

2. Accepted Values

Value	Description
stretch (default)	Stretches items to fit the container height.
flex-start	Aligns items at the start of the cross-axis.
flex-end	Aligns items at the end of the cross-axis.
center	Centers items along the cross-axis.
baseline	Aligns items based on their text baseline.

3. Example – align-items in Flexbox

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

.box {
  width: 50px;
  height: 50px;
  background: red;
}

✅ All .box elements are centered vertically.

4. Example – align-items in CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 200px;
  align-items: flex-end;
}

.grid-item {
  background: blue;
}

✅ All grid items align at the bottom.

5. Difference Between align-items & align-self

• align-items → Affects all items in the container.

• align-self → Overrides alignment for a specific item.

Example:

.box:nth-child(2) {
  align-self: flex-start;
}

✅ Only the second item moves to the top.

6. Best Practices

✔ Use center for vertical centering.
✔ Use stretch for uniform heights.
✔ Use baseline for text-heavy layouts.