Works like align-items, but applies only to a single flexbox item, instead of all of them.
align-self: flex-start;
If the container has align-items: center and the target has align-items: 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-items: 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-items: 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-items: 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-items: stretch, only the target will stretch along the whole cross axis.