🎯 CSS align-items Property

The align-items CSS property is used in Flexbox to control how flex items are aligned along the cross axis (vertical alignment in row direction).

It allows you to position items at the top, center, bottom, or stretch them inside a flex container.

align-items: stretch | center | flex-start | flex-end | baseline;
                

Default value. Items stretch to fill the container’s height.

Items are centered vertically inside the container.

Items are aligned at the top of the container.

Items are aligned at the bottom of the container.

Items are aligned based on text baseline alignment.

Resets the property to default (stretch).

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

.item {
    width: 50px;
    height: 50px;
}
                

In this example, all flex items are vertically centered inside the container.