align-self

align-self

align-self  works like align-items, but applies only to a single flexbox item, instead of all of them.

align-self: auto;

The target will use the value of align-items.

See the Pen
CSS Property align-self:auto; by Mukesh Singh (@codecad)
on CodePen.

align-self: flex-start;

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

See the Pen
CSS Property align-self: flex-start; by Mukesh Singh (@codecad)
on CodePen.

align-self: flex-end;

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

See the Pen
CSS Property align-self:flex-end; by Mukesh Singh (@codecad)
on CodePen.

align-self: center;

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

See the Pen
CSS Property align-self:center; by Mukesh Singh (@codecad)
on CodePen.

align-self: baseline;

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

See the Pen
CSS Property align-self: baseline; by Mukesh Singh (@codecad)
on CodePen.

align-self: stretch;

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

See the Pen
CSS Property align-self:stretch; by Mukesh Singh (@codecad)
on CodePen.

Browser Support
Desktop

Mobile