Align flex item in cross direction with align-self
Each flex item can separately decide how it wants to be aligned.
The flex container may be able to tell the flex item where to go along the main axis with .
But each flex item has the final say on where along the flex line’s cross axis it wants to go with align-self.
By default, flex items rely on the flex container’s
This happens when a flex item has align-self: auto.
auto is the initial value of align-self.
So this is the default behavior.
You can have some flex items follow the flex container’s suggestion, and some align themselves differently.
You basically take each flex item’s margin box and align it to some point in the flex line.
For example, with align-self: flex-start, the flex item’s cross-start edge will be aligned with the flex line’s cross-start edge.
With align-self: center, the flex item margin box’s center will be aligned with the flex line’s center.
If the flex item was stretched before, nothing happens.
If align-self resolves to stretch, then the flex item was already stretched in a previous step.
If flex item auto margins claimed remaining space before, nothing happens.
When an auto margin claims space, the margin box of a flex item gets bigger. auto margins claim all space available, and the flex item’s margin box ends up the same size as the flex line. So we won’t be able to perceive any change.
The flex item gets aligned even if it means overflowing the flex line
It doesn’t matter if there’s any space left in the flex line or not. If you have a huge flex item and a small flex line, alignment will still happen.
Think of alignment like attaching a magnet to a particular place on the flex item, and another one to a particular place on the flex line.
Image with magnets