🎯 CSS align-self Property

The align-self CSS property is used in Flexbox to control the vertical alignment of a single flex item inside a container.

While align-items controls all items, align-self allows you to override alignment for a specific element.

align-self: auto | stretch | center | flex-start | flex-end | baseline;
                

The item follows the parent container’s align-items value.

The item stretches to fill the container height.

The item is vertically centered inside the container.

The item aligns to the top of the container.

The item aligns to the bottom of the container.

The item aligns based on text baseline.

Resets the property to default (usually auto).

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

.item1 {
    align-self: flex-start;
}

.item2 {
    align-self: flex-end;
}
                

In this example, each item can have its own alignment independent of the other flex items.