New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#align-self

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

default align-self: auto;

The target will use the value of align-items.

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.

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.

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.

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.

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.