New! My 44-page ebook "CSS in 44 minutes" is out! 😃
#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.